開始
我們現在的配置都是寫在一個webpack.config.js文件夾里，但是實際上，我們在開發環境和生產環境中使用的配置是不一樣的，比如生產環境中我們需要包的體積不能很大，不然在線上響應會變慢。所以我們需要將生產環境和開發環境分開來。
cross-env
在node里，我們有一個process對象，它里面包括了node的一些信息，env和它的一個屬性，但是並沒有process.env.NODE_ENV，這是我們自己添加的一個用來區分環境的變量，我們通過這個來區分生產開發環境。
但是不同電腦上設置的方式是不一樣的，所以cross-env就來了，它可以跨平台設置環境和使用環境變量。
我們需要在控制台執行：
yarn add cross-env -D
復制代碼然后我們在package.json里配置：
"build": "cross-env NODE_ENV=production webpack", "dev": "cross-env NODE_ENV=development webpack-dev-server" 復制代碼我們在webpack.config.js里添加：
const NODE_ENV=process.env.NODE_ENV; console.log("--------"+NODE_ENV+"-----------"); 復制代碼然后去控制台執行，當執行yarn run build時：
控制台打印出了我們設置的production。
執行yarn run dev的時候：
打印出了devlopment，說明我們已經設置完成了。
webpack-merge
設置了環境之后我們需要將配置分開，我們先在根目錄下新建==webpack.config.dev.js==（開發環境），==webpack.config.prod.js==（生產環境），將原本的webpack.config.js修改成==webpack.config.common.js==（公共）。
分離開的環境需要和common里的代碼合並使用，所以我們就需要用到webapck-merge插件，我們在控制台執行：
yarn add webpack-merge -D
復制代碼下載好后先去package.json里修改配置：
//--config是可以設置我們執行哪個webpack文件，默認是執行webpack.config.js,但是我們現在修改文件名了，所以我們要設置一下 "build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js", "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.dev.js" 復制代碼我們將一些開發環境用到的東西移到==webpack.config.dev.js==里：
const path=require('path'); const webpack=require('webpack'); const merge=require('webpack-merge');//這里引入merge const common=require('./webpack.config.common.js');//這里引入公共代碼 module.exports=merge(common,{//注意這里的寫法 mode:'development', devtool:'cheap-module-eval-source-map', module:{ rules:[ ] }, devServer: { contentBase: path.join(__dirname, "dist"), compress: true,//開啟gzip壓縮 port: 8080, open:true, hot:true, overlay:true, }, plugins:[ new webpack.HotModuleReplacementPlugin(), ] }) 復制代碼生產環境的移到==webpack.config.prod.js==：
const merge=require('webpack-merge'); const webpack=require('webpack'); const common=require('./webpack.config.common.js'); const MiniCssExtractPlugin=require('mini-css-extract-plugin'); const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports=merge(common,{ mode:'production', module:{ rules:[ ] }, plugins:[ new MiniCssExtractPlugin({//提取css filename:'css/main.css' }), new CleanWebpackPlugin('./dist'),//刪除dist目錄下的文件 new BundleAnalyzerPlugin({ analyzerPort: 8090 }), ] }) 復制代碼然后去==webpack.config.common.js==里將相關代碼刪除就行了。
這里還有個注意點，在使用MiniCssExtractPlugin.loader的時候是不支持熱更新的，所以我們需要根據環境來區分這個，我們在==webpack.config.common.js==里修改一下：
//開發環境使用style-loader { loader:NODE_ENV==="production" ? MiniCssExtractPlugin.loader : "style-loader" }