modeオプションの値

modeオプションは基本的には開発環境用(development)と本番環境用(production)を指定することができます。
何も指定しない場合、productionになります。

・開発環境用

npx webpack --mode development

・本番環境用

npx webpack --mode production

modoの違い

開発環境用(development)

本番環境用(production)モードは制作や開発の完成後を想定したモードになります。バンドルファイルの内容に無駄なものが省かれるのでファイル容量が小さくなります。その為、ブラウザから読み込まれる速度が速いです。

本番環境用(production)

開発環境用(development)モードは制作や開発中を想定したモードになります。バンドルファイルはproductionモードのものより見やすくデバックしやすくなっています。その分ファイル容量が大きく、ブラウザから読み込まれる速度が遅くなるので本番には不向きです。

設定ファイルによるmodeの指定

webpack実行時にmodeオプションを指定し実行出来ますが、webpack.config.jsにmodeを指定しwebpackを実行出来ます。以下は ‘development’ を指定しています。

'use strict'

const path = require('path')

module.exports = {
  mode: 'development',
  entry: './src/js/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
}

webpackの実行

webpackを実行します。何も指定しないと、webpack.config.js の mode に指定されたmodoで実行されます。

npx webpack
asset main.js 4.14 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cacheable modules 116 bytes
  ./src/js/index.js 57 bytes [built] [code generated]
  ./src/js/test.mjs 59 bytes [built] [code generated]
webpack 5.103.0 compiled successfully in 73 ms

次回

web画面での javascript は html から読み込まれ実行されます。なので htmlファイルが必要です。
通常 webpack は jsファイルを対象とし dist ディレクトリ以下にバンドルファイル(main.js)を出力します。
バンドルファイルを読み込むhtmlファイルも同時にdist以下に作成されると効率が良くなります。

html-webpack-plugin を使う事でwebpack実行時にバンドルファイルを読み込むhtmlも同時にdist以下に出力してくれます。

次回はプラグインを使用してwebpackを実行してみようと思います。

次回

【webpack】プラグイン