webpack-dev-server を使う

イントロ

webpack dev server

見ればだいたい書いてある。
webpack は少し触らないと忘れてしまうので、メモしておく。
それと何故か webpack の公式 Document は読みづらい(私だけ？)というのも理由の一つ。

webpack-dev-server って？

開発用の web サーバー。Express で作られてる。 おおまかに２つのことができる

• Hot Module Replacement
  • module を変更したら変更を検知して読み込み直す
• Automatic Refresh
  • react とかで、component を変更したら、自動で reload する

これだけできれば、わざわざ変更のたびにサーバーを再起動しなおさなくて済むので、とりあえずの開発には困らなくなる。

導入

まずは npm install

$ npm i --save-dev webpack-dev-server

webpack.config.js を編集。

module.exports = {
   context: path.join(process.env.PWD, 'frontend'),
-  entry: "./index.js",
+  entry: [
+    "webpack-dev-server/client?http://localhost:8080",
+    "webpack/hot/dev-server",
+    "./index.js"
+  ],
   output: {
     path: path.join(__dirname, 'dist'),
-    filename: 'webpack.bundle.js'
+    filename: 'webpack.bundle.js',
+    publicPath: "/assets/"
   },
@@ -14,7 +18,8 @@ module.exports = {
   plugins: [
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: JSON.stringify(process.env.NODE_ENV)
       }
-    })
+    }),[f:id:mgi:20160416232151g:plain]
+    new webpack.HotModuleReplacementPlugin()
   ],

やってることは 3 つ

• entry を増やす
  • webpack-dev-server/client?http://localhost:8080, webpack/hot/dev-server の２つ
• plugins に webpack.HotModuleReplacementPlugin を足す
• output.publicPath: を設定
  • publicPath の説明はこちら
    • configuration

後は option つけてコマンドラインで起動すれば良い

$ webpack-dev-server —hot —inline

まとめ

簡単に導入できて、凝ったことしない限りは十分なので非常に助かる。