重構之路：webpack區分生產環境和開發環境
我們現在的配置都是寫在一個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"
}
複製程式碼