Edited at

webpackで開発用/本番用の設定を分ける

More than 1 year has passed since last update.


webpackとは

webpack

謂わずと知れたバンドルツール。

JSのみならず、CSSやimageファイル等をひとまとめにしてくれる便利ツール。


設定を分割しない構成


ディレクトリ構成

root/

├ dist/
│ └ ビルド後のファイル
├ src/
│ ├ css
│ └ js 等
├ webpack.config.js
└ package.json



root/webpack.config.js

// pathとかpluginとか

const path = require('path')

module.exports = {
entry: {
// エントリポイント
app: ...
},
output: {
// filenameとかpathとか
path: ... ,
filename: ...
},
module: {
rules: [
// loaderの設定
{
test: ... ,
loaders: [ ... ],
}
]
},
devServer: {
// webpack-dev-server用の設定
},
plugins: [
// プラグイン設定
]
}



root/package.json

"scripts": {

"build": "webpack",
"build:prod": "webpack --mode=production",
"start": "webpack-dev-server --hot --inline",
"start:prod": "webpack-dev-server --hot --inline --mode=production",
"test": "jest --watch"
},


この設定でしばらく開発していたが...



  • buildstartがそれぞれdev/prodとあるのは微妙だし、役割が曖昧

  • 開発環境では--mode=developmentでサーバを立ち上げればOK

  • 本番環境では--mode=productionでビルドすればOK

  • 開発用/本番用でwebpack.config.jsを分けたい!


webpackのベストプラクティス

公式にちゃんとあった

Production - Webpack

webpack.config.jsをマージできるモジュール

webpack-merge - Merge designed for Webpack


webpack.config.jsを分割した構成


ディレクトリ構成

root/

├ dist/
│ └ ビルド後のファイル
├ src/
│ ├ css
│ └ js 等
├ webpack.common.js // 汎用設定
├ webpack.dev.js // 開発用設定
├ webpack.prod.js // 本番用設定
└ package.json


まず、開発用/本番用のどちらでも使う設定を記述する。


root/webpack.common.js

// pathとかpluginとか

const path = require('path')

module.exports = {
entry: {
// エントリポイント
app: ...
},
output: {
// filenameとかpathとか
path: ... ,
filename: ...
},
module: {
rules: [
// loaderの設定
{
test: ... ,
loaders: [ ... ],
}
]
},
plugins: [
// プラグイン設定
]
}


そして、開発用/本番用それぞれで必要な設定を記述し、webpack.common.jsとマージする


root/webpack.dev.js

const merge = require('webpack-merge') // webpack-merge

const common = require('./webpack.common.js') // 汎用設定をインポート

// common設定とマージする
module.exports = merge(common, {
mode: 'development', // 開発モード
output: {
publicPath: ... ,
},
devtool: 'inline-source-map', // 開発用ソースマップ
devServer: {
// webpack-dev-serverの設定
...
}
})



root/webpack.prod.js

const merge = require('webpack-merge') // webpack-merge

const common = require('./webpack.common.js') // 汎用設定をインポート

// common設定とマージする
module.exports = merge(common, {
mode: 'production', // 本番モード
output: {
publicPath: ... ,
},
})


scriptsでどの設定を呼び出すか指定する必要がある


root/package.json

"scripts": {

"build": "webpack --config webpack.prod.js",
"start": "webpack-dev-server --hot --inline --config webpack.dev.js",
"test": "jest --watch"
},


まとめ


  • 開発用/本番用のwebpack設定は分けよう(公式推奨だし...)

  • てかちゃんと公式ドキュメント読もう

  • まだまだwebpackは奥が深いので、勉強頑張っていこう