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在编译打包时执行不同的操作优化，具体参考官方文档