webpack 入門 設定ファイルを使ってみよう

2020年10月31日

前回に引き続き webpack 入門です。

今回は設定ファイルの webpack.config.js について触れます。

webpack.config.js とは

これまでは、webpack のオプションをコマンド実行時に指定していました。

しかし、実際の開発でその都度オプションを指定するのは間違いの元になりますし、複数人数で開発するときにはどのオプションを指定するかを共有できると便利です。

webpack.config.js を使うとその問題を解消できます。

ファイルを作成する

プロジェクト直下に webpack.config.js というファイルを作成し、以下のように記述してみます。

module.exports = {
  mode: "development"
};

作成したら以下のコマンドを実行してみます。

$ npx webpack

webpack.config.js の中に mode: “development" の設定があるため、以下を実行したのと同じ動作になります。

$ npx webpack --mode=development

試しにwebpack.confg.js内を以下のように変更して、npx webpack を実行して、dist/main.js の中身が変わっていることも確認してみましょう。

module.exports = {
  mode: "production"
};

設定ファイルのファイル名について

webpack はデフォルトでは webpack.config.js とファイルがプロジェクト内にあれば自動でその設定を読み込むようになっています。

例えば開発用と本番用でファイルを分けたい場合は、–config オプションを使います。

module.exports = {
  mode: "development"
};

module.exports = {
  mode: "production"
};

webpack.dev.js を実行する場合

$ npx webpack --config=webpack.dev.js

webpack.prod.js を実行する場合

$ npx webpack --config=webpack.prod.js