生產環境優化
開發環境注重開發效率，生產環境注重運行效率。
開發環境所使用的soucre map和HMR等webpack特性會 生成 或 向打包文件中添加 一些生產環境用不到的內容。
針對這個問題，webpack4推出了 模式(mode) 。
它提供了不同模式下的預設配置。
其中 production 模式內部開啓了很多通用的優化功能。
同時，webpack也建議開發者爲不同的工作環境創建不同的配置。
不同環境下的配置
方式1：配置文件根據環境不同，導出不同的配置（中小型項目）
webpack配置文件可以導出一個返回配置對象的函數(env,argv) => { return {...} }。
函數接收兩個參數：
env接收cli命令中的環境名（--env）參數
aegv是cli命令中的所有參數
如此，就可以在函數中根據env判斷，對配置做調整。
也可以通過環境變量來判斷。
這種方式只適合中小型項目，因爲隨着項目變得複雜，不同環境的配置也變得複雜起來，不方便在一個配置文件中去維護。
對於大型項目還是建議使用，一個環境對應一個配置文件的方式去維護。
方式2：一個環境對應一個配置文件（大型項目）
一般項目中會配置3個 環境的配置文件。其中兩個用來適配不同的環境(dev/development、prod/production)，另一個存放公共的配置(common/base)。
在dev和prod配置文件中，導入公共配置對象common並將其複製到當前導出的對象中，最後用當前環境的配置對象覆蓋。
由於Object.assign()是淺拷貝，使用它來覆蓋公共配置是不合適的。
可以使用webpack-merge模塊完成合並webpack配置的需求，它內部自動處理合並的邏輯。
由於現在沒有默認的配置文件（webpack.config.js），所以需要使用--config參數指定使用的配置文件。
例如：yarn webpack --config webpack.prod.js
可以將命令配置到package.json的scripts中。
DefinePlugin 插件 注入全局成員
DefinePlugin 插件用於爲代碼注入全局成員。
webpack 4 的 production 模式下，默認會啓用這個插件，並且向代碼中注入了一個process.env.NODE_ENV的全局常量。
很多第三方的模塊都是通過這個成員判斷當前的運行環境，從而決定是否執行一些操作，例如：打印日誌
DefinePlugin 插件接收一個對象，對象中的的key-value都會被注入到代碼當中。
例如：
const webpack = require('webpack')
module.exports = {
plugins: [
new webpack.DefinePlugin({
// 全局注入一個API地址
API_BASE_URL: 'https://api.example.com',
// value應是一個符合JS語法的代碼片段
// API_BASE_URL: '"https://api.example.com"'
// API_BASE_URL: JSON.stringify('https://api.example.com')
})
]
}
打包時，就會將API_BASE_URL的值，**直接 **替換代碼中的API_BASE_URL。
開發時：console.log(API_BASE_URL)
打包後:console.log.(https://api.example.com)
由此可知，DefinePlugin定義的成員的值，實際上是一個符合JS語法的代碼片段。
它會在打包時直接替換代碼中的key。
所以API_BASE_URL配置的值可以改爲'"https://api.example.com"'
小技巧：如果value爲一個值，可以通過JSON.stringify()將其轉換成一個表示這個值的代碼片段。
DefinePlugin 插件可以用於針對不同的環境注入對應的全局成員。