@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

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在編譯打包時執行不同的操作優化，具體參考官方文件