webpack的development与production模式区分打包

安装插件：npm i -D webpack-merge

将以前的webpack.config.js拆分为三个文件

• webpack.common.js 开发与线上共同需要配置
• webpack.dev.js 开发环境下所需的配置
• webpack.prod.js 线上环境下所需的配置

webpack.prod.js

const merge = require('webpack-merge');
const commonConfig = require('./webpack.common');

const prodConfig = { // 配置好后 npx webpack
    mode: 'production', // development 不压缩 production 默认是被压缩
    devtool: 'cheap-module-source-map', // production 生产环境
};

module.exports = merge(commonConfig, prodConfig);

webpack.dev.js

const merge = require('webpack-merge');
const commonConfig = require('./webpack.common');

const devConfig = { // 配置好后 npx webpack
    mode: 'development', // development 不压缩 production 默认是被压缩
    devtool: 'cheap-module-eval-source-map', // development 开发环境最优配置
};

module.exports = merge(commonConfig, devConfig);

webpack.common.js（正常配置即可）

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
    
}

package.json下的配置

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