自動buildとリロード｜webpack

  • 投稿日
  • 著者 kngsmym
  • カテゴリー webpack

ファイルが更新されたら自動でbuildしてリロードしたい。

自動build

webpack自体にwatch機能あり。webpack.config.jsでwatchモードをオンにする。

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: PATH.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  watch: true,//←こんな感じ

こうすると、webpackを実行してbuildするとwatchモードに入るようになる。

リロード

browsersyncを使用

インストール

$ npm install --save-dev browser-sync

package.jsonに以下のscriptを追加

"bs": "browser-sync start --server --files='**/*.html,**/*.css,**/*.js' --startPath=/dist/index.html",

実行

$ npm run bs
[Browsersync] Access URLs:
 -------------------------------------------------------
       Local: http://localhost:3000/dist/index.html
    External: http://192.168.10.104:3000/dist/index.html
 -------------------------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------------------------
[Browsersync] Serving files from: ./
[Browsersync] Watching files...

これで、html、css、jsが更新されたらリロードされるようになる。

合わせる

上記ふたつは別タブなどでそれぞれ実行しても問題ないけど、１コマンドですませるようにpackage.jsonにscriptを追加。

"start": "webpack&npm run bs"

scripts全体ではこんな感じ

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "bs": "browser-sync start --server --files='**/*.html,**/*.css,**/*.js' --startPath=/dist/index.html",
    "start": "webpack&npm run bs"
  },

これで、ターミナルで以下を実行すると両方いっぺんで動く。

$ npm run start

プラグイン

ここまで書いといてなんなんだけど普通にプラグインあるらしい。browsersyncを別に書かなくてもいいぽい。しかも導入がめっちゃ簡単。

インストール

$ npm install --save-dev browser-sync-webpack-plugin browser-sync

設定

webpack.config.jsにプラグインを追加

"watch": "php -S 0.0.0.0:8000 & webpack --watch --config webpack.config.js",
〜
  plugins: [
〜
    new BrowserSyncPlugin({
      host: "localhost",
      port: 3000,
      server: { baseDir: ['dist'] }
    })
  ]
〜

以上の設定が完了したらwatchモードでwebpackを実行すればbrowsersyncスタート。

$ webpack --watch

僕の場合は前項の自動buildでwebpack.config.jsのwatchモードをtrueにしてるので、普通にwebpackすればOK。

  output: {
    path: PATH.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  watch: true,//←これをここに書けばコマンド側でパラメータ指定しなくていい
  module: {

scriptsにwebpackを登録してるので

$ npm run build

と書くか、直接、

$ npx webpack

とかでOK。

出力されるログを見る限り内部的には別々に書いて同時に実行するのとやってることは一緒だと思うけど、こっちのが実装の手間が少ないですね。