webpackを使用してjavascriptを集束（バンドル）する – npm + nunjucks + stylus で静的サイト制作を効率的にする(4)

前回までで次のようなことをやってきました。

• nunjucks でhtml生成
• stylus でcss生成
• imagemin で画像圧縮

javascriptはそのままコピーして使用する想定でしたが使用量が増えてしまった時のためにwebpackを使用してバンドルする流れも残しておきます。

今回はjavascriptを対象にしますがTypescriptを使用するケースもありますのでそれは別の記事で残しておきます。

• [webpack] 複数のjavascriptファイルを適切にまとめてくれるツール。jsファイル以外のファイルもまとめてくれる。
• [Typescript] javascriptを拡張して作られた言語。

webpackの存在意義の変化

いままではES6未対応のIE11に新しい書き方のjsを読み込ませるために使用していたケースがほとんどでした。

2022年6月15日のIE11サポート終了によりES6がすべての主要ブラウザ対応になりこの処理は不要となります。

あたらしいjavascriptの書き方では今までツールなしでできなかったモジュール（外部jsファイル）の読み込みもできるのでモジュールバンドルという機能も不要となりwebpackの役割は終了したかと思えます。

しかし、ReactやTypescriptなどではまだまだ必要でEdgeに搭載されている（余計な…）IEモード対応案件なんて恐怖なものが出てくる時のためにまだまだwebpackは捨てられないようです。

webpackでjavascriptを集束（バンドル）する方法

必要なパッケージをインストールします

npm i -D webpack-cli

※webpackを扱っている色々な記事ではwebpackとwebpack-cliの両方を入れていますがnpm-scriptsだけでwebpackを呼び出すのでwebpack-cliだけのインストールで十分です。

package.jsonのscript部分を以下のように修正します。

// 変更前
"build:js": "cpx \"src/js/**/*.js\" dist/js/"
"watch:js": "chokidar \"src/**/*.js\" -c \"npm run build:js\""

// 変更後
"build:js": "webpack"
"watch:js": "webpack --watch"

つぎにwebpack.config.jsファイルを作成してwebpackの処理を設定していきます。

touch webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/js/index.js',
  output: {
    path: path.resolve(__dirname, './dist/js'),
    filename: 'script.bundle.js'
  },
  module: {
    rules: [
      {test: /\.js$/},
    ]
  },
  target: ['web']
}

ここまで来たらコマンドを入力してscript.bundle.jsができることを確認します。

今回はここまでで次回はwebpackにbabelを導入してEdgeのIEモード対応（いるのか？）に備えます。