webpack4使用mode優化開發環境配置

@subject: webpack mode
@author: leinov
@date: 2018-11-29

mode

webpack的 mode 配置用於提供模式配置選項告訴webpack相應地使用其內置的優化，mode有以下三個可選值

• development
• production
• none

配置

1. 直接寫在webpack.config.js配置中

module.exports = {
  mode: 'production'
};

2. 作為webpack執行的參數

webpack --mode=production

通過上面的配置，我們就可以在業務代碼中通過process.env.NODE_ENV拿到環境變量值，這里的process.env.NODE_ENV 要跟node的區分，這句等同於

new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),

如果我們在webpack執行命令和webpack配置文件里都沒有寫入mode配置，在執行webpack時會有如下提示：在沒有配置的情況下默認顯示production,這里我們建議大家配置，這樣才有區分環境的意義

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

使用

在開發和生產版本有很多不同之處，主要可分下面幾種

• 接口不同，后端返回的接口分線上開發
• 編譯結果不同，是否分離js，css，是否壓縮等

通過mode的設置，我們就可以輕松對開發環境做嚴格的區分

1.運用於開發和生產的接口區分

package.json 配置

{
 "scripts": {
    "dev": "webpack-dev-server --mode=development --devtool inline-source-map --hot",
    "build":"webpack --mode=production",
  },
}

接口前綴根據編譯的mode值區分

// 接口前綴配置
let baseUrl = "";
const env = process.env.NODE_ENV;
if(env === "production" || env === "none"){
	baseUrl= "https://www.production.com/public/"; 
}else{
	baseUrl= "https://www.development.com/public/"; 
}
export default baseUrl;

2.運用在編譯打包

這是webpack4改進很重要的一點，開發者不需要太多配置，只需要設置好mode，webpack會根據mode在編譯打包時執行不同的操作優化，具體參考官方文檔