読者です 読者をやめる 読者になる 読者になる

scramble cadenza

技術ネタのガラクタ置き場

webpack-dev-server を使う

イントロ

webpack dev server

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

webpack-dev-server って?

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

  • 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 の2つ
  • plugins に webpack.HotModuleReplacementPlugin を足す
  • output.publicPath: を設定

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

$ webpack-dev-server —hot —inline

まとめ

f:id:mgi:20160416232151g:plain

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