webpack4 配置文件分離

webpack4 配置文件分離

關於mode

• webpack根據開發和生成環境通常能夠將配置文件拆分，拆分dev和prod兩種環境

|- package.json
  |- /build
    |- webpack.base.js
    |- webpack.dev.js
    |- webpack.prod.js

• 在scripts裏修改相應的命令

"dev": "webpack-dev-server --config build/webpack.dev.js",
"build": "webpack --config build/webpack.prod.js"

• 使用webpack-merge,用以合併通用配置文件與開發環境配置文件

// webpack.dev.js
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base');

module.exports = merge(baseWebpackConfig, {
  mode: 'development',
  devServer: {
    host: '127.0.0.1',
    port: 80,
    contentBase: path.join(__dirname, 'dist'),
    open: false,
    hot: false,
    disableHostCheck: true,
    proxy: {},
    before () {}
  },
  plugins: [
    // 啓用 HMR
    new webpack.HotModuleReplacementPlugin({})
  ]
});

// webpack.prod.js
const baseWebpackConfig = require('./webpack.base');
module.exports = merge(baseWebpackConfig, {
  mode: 'production'
});