每次在开发和生产环境都要切换代码会非常麻烦，在webpack里面可以用merge合并同样代码偷懒。
安装代码合并包，-D代表 --save-dev npm install webpack-merge -D
将development和production共同的代码的抽出来放入webpack.common.js
const path = require('path'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { entry: { main: './src/index.js' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }, plugins: [ new CleanWebpackPlugin() ], output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') } };创建development下会用到的配置代码
const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpackMerge = require('webpack-merge') const webpackCommon = require('./webpack.common') const devConfig = { mode: 'development', devtool: 'cheap-module-eval-source-map', devServer: { contentBase: './dist' }, plugins: [ new HtmlWebpackPlugin({ template: 'src/index.html' }), new webpack.HotModuleReplacementPlugin() ], optimization: { usedExports: true } }; module.exports = webpackMerge.merge(devConfig, webpackCommon)创建production环境下会用到的代码
const { merge } = require('webpack-merge') const webpackCommon = require('./webpack.common') const prodConfig = { mode: 'production', devtool: 'cheap-module-source-map' }; module.exports = merge(webpackCommon, prodConfig)打包的时候根据命令不同，打包不同环境。
scripts下的dev：打包开发环境，使用命令npm run devscripts下的prod：打包生产环境，使用命令npm run prod { "name": "webpack-demo", "sideEffects": [ "*.css" ], "version": "1.0.0", "description": "", "main": "webpack.config.js", "dependencies": { "@babel/polyfill": "^7.11.5", "@babel/runtime-corejs2": "^7.11.2", "url-loader": "^4.1.0", "webpack": "^4.44.2", "webpack-cli": "^3.3.12" }, "devDependencies": { "@babel/core": "^7.11.6", "@babel/plugin-transform-runtime": "^7.11.5", "@babel/preset-env": "^7.11.5", "autoprefixer": "^9.8.6", "babel-loader": "^8.1.0", "clean-webpack-plugin": "^3.0.0", "css-loader": "^4.3.0", "file-loader": "^6.1.0", "html-webpack-plugin": "^4.5.0", "node-sass": "^4.14.1", "postcss-loader": "^4.0.2", "sass-loader": "^10.0.2", "style-loader": "^1.2.1", "webpack-dev-server": "^3.11.0", "webpack-merge": "^5.1.4" }, "scripts": { "watch": "webpack --watch", "dev": "webpack-dev-server --config webpack.dev.js", "prod": "webpack --config webpack.prod.js", "boundle": "webpack" }, "keywords": [], "author": "", "license": "ISC", "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] }