Webpack之拆分/合并配置

使用webpack-merge 合并配置

然后对应script为：

build:dev webpack --config webpack.dev.config.js

build webpack --config webpack.prod.config.js

// webpack.base.config.js
const path = requrie('path);
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}


// webpack.dev.config.js
const baseConfig = require('./weback.base.config.js');
const { smart: merge } = require('webpack-merge');

const devConfig = {
    mode: 'development'
    // 开发环境配置....
}

module.export = merge(baseConfig, devConfig);


// webpack.prod.config.js
const baseConfig = require('./weback.base.config.js');
const { smart: merge } = require('webpack-merge');

const prodConfig = {
    mode: 'production'
    // 生产环境配置....
}

module.export = merge(baseConfig, prodConfig );