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

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"
},

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

• buildとstartがそれぞれ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は奥が深いので、勉強頑張っていこう