6.1 环境
6.1.1模式（mode）
- 日常的前端开发工作中，一般都会有两套构建环境
- 一套开发时使用，构建结果用于本地开发调试，不进行代码压缩，打印 debug 信息，包含 sourcemap 文件
- 一套构建后的结果是直接应用于线上的，即代码都是压缩后，运行时不打印 debug信息，静态文件不包括 sourcemap
- webpack 4.x 版本引入了 mog的概念
- 当你指定使用 production mode 时，默认会启用各种性能优化的功能，包括构建结果优化以及 webpack运行性能优化
- 而如果是 development mode 的话，则会开启 debug 工具，运行时打印详细的错误信息，以及更加快速的增量编译构建选项
6.1.2 环境差异
-
开发环境
-
需要生成 sourcemap 文件
-
需要打印 debug 信息
-
需要 live reload 或者 hot reload 的功能
-
生产环境
-
可能需要分离 cSS 成单独的文件，以便多个页面共享同一个 css 文件
-
需要压缩 HTML/CSS/JS 代码
-
需要压缩图片
-
其默认值为 production
6.1.3 区分环境
-
-mode 用来设置模块内的 process.env.NODE_ENV
-
-env 用来设置webpack配置文件的函数参数
-
croSS-env用来设置node环境的 process.env.NODE_ENV
-
dotenv可以按需加载不同的环境变量文件
-
define-plugin用来配置在 编译时候 用的 全局常量
6.1.3.1 安装
cnpm i cross-env dotenv terser-webpack-plugin optimize-css-assets-webpack-plugin -D
6.1.3.2 mode默认值
-
webpack的mode默认为 production
-
webpack serve 的默认为 development
-
可以在模块内通过 process.env.NODE_ENV 获取当前的环境变量，无法在 webpack配置文件 中获取此变量
"scripts": {
"build":"webpack"
"start": "webpack serve" }
index.js
console. log(process.env.NODE_ENV);// development | production
webpack.config.js
console.log('NODE_ENV',process.env.NODE_ENV); // undefined
6.1.3.3 命令行传mode
-
同配置1
"scripts": { "build":"webpack --mode=production", "start":"webpack --mode=development serve" }
6.1.3.4 命令行配置env
-
无法在模块内通过 process.env.NODE_ENV访问
-
可以通过 webpack 配置文件中通过函数获取当前环境变量
"scripts": { "dev": "webpack serve --env=development", "build": "webpack --env=production" }
index.js
console.log(process.env.NODE_ENV); //undefined
webpack.config.js
console.log("NODE_ENVI",process.env.NODE_ENV); //undefined
const TerserWebpackPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = (env) => {
console log('env', env);// (development: true) | (production: true}
return{
optimization: {
minimize: env&&env.production,
minimizer: (env&&env.production)?[new TerserWebpackPlugin({
parallel:true//开启多进程并行压缩
}),new OptimizeCssAssetswebpackPlugin({})]:[]
}
}
}
6.1.3.5 mode配置
-
和命令行配置2一样
module. exports = { mode:'development' }
6.1.3.6 DefinePlugin
- 设置全局变量（不是 window ）,所有模块都能读取到该变量的值
- 可以在任意模块内通过 process.env.NODE_ENV获取当前的环境变量
- 但无法在 node环境（webpack 配置文件中）下获取当前的环境变量
6.1.3.6.1 webpack.config.js
console.log('process.env.NODE_ENV',process.env.NODE_ENV);// undefined
console.log('NODE_ENV',NODE_ENV); // error
module.exports = {
plugins: [
//在编译时使用的全局变量，在浏览器的运行阶段就变成了值了
new webpack.DefinePlugin({
"process.env.NODE_ENV":JSON.stringify('development'),//注意用双引号引起来
"NODE_ENV':JSON.stringify('production'),
})
]
}
6.1.3.6.2 src/index.js
console.log(NODE_ENV) ;// production
