Webpack 筆記整理 (七) - Webpack merge

由於在撰寫 Webpack 設定檔的時候，會區分為 development 和 production mode，而兩種不同的開發模式設定會不太一樣，所以我們可以額外建立兩個設定檔，一個是設定開發模式的設定，一個是設定釋出模式的設定。

而這些設定可能會有一些共用的地方，我們可以另外安裝一個套件

npm i --save-dev webpack-merge

這個套件可以將一些基本的設定合併到我們的目標檔案裡面，目前會將設定檔拆成三個檔案 webpack.common.js、webpack.prod.js、webpack.dev.js

webpack.common.js

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'development',
  devtool: 'inline-source-map',
  entry: './src/index.js',
  devServer: {
    contentBase: './dist',
    port: 3030,
    hot: true
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,  
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpg|jpeg|svg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'myPrefix.[name].[ext]',
              publicPath: './images',
              outputPath: 'images/'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: '首頁',
      filename: 'index.html',
      template: './index.html'
    })
  ]
}

webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common');
const webpack = require('webpack');
module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ]
})

webpack.prod.js

const merge = require('webpack-merge');
const common = require('./webpack.common');
module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
})

可以看到主要是利用 webpack merge 將 webpack.common.js 的設定合併到 webpack.dev.js 和 webpack.prod.js 之中，如此我們便不用額外在重複設定

然後在執行的時候，需要額外在指定我們要使用哪一個設定檔

npx webpack --config webpack.dev.js
npx webpack --config webpack.prod.js

範例程式碼 : https://github.com/cos214159/webpack-tutorial/tree/master/chapter7-merge-config-file