webpack5 环境变量

01. 简介

这一章东西比较少，但是可以延伸的比较多。

项目肯定分环境，你可以依据环境打包你需要的 JavaScript

我知道的一般3中方式

1. 不同的 config , 使用 merge , 在命令行中直接指定 --config 来实现不同的打包方式
2. 写一个打包的函数，在命令行中通过不同的环境变量去判断，然后执行打包
3. 根据服务器的环境变量，通过插件 webpack.definePlugin 来实现两端共享。

第一种是我最常用的一种，因为项目没有那么复杂，往往区别只是在于是否开启 source-map , 是否压缩之类的，甚至都不需要使用 merge，复制两份改一改即可。

第二种，第三种我没用过.

02. 关于merge使用.

首先从原来到的 webpack.config.js 变成三个. webpack.config.js 删除公共部分.

我这边删除了

{
    mode: "development",
    devtool: "source-map"
}
复制代码

然后安装 webpack-merge 插件.

npm install webpack-merge --save-dev
复制代码

创建 webpack.dev.config.js & webpack.pro.config.js

webpack.dev.config.js

const merge = require("webpack-merge").merge;
const baseConfig = require("./webpack.config");

module.exports = merge(baseConfig, {
    mode: "development",
    devtool: "source-map"
});
复制代码

webpack.pro.config.js

const merge = require("webpack-merge").merge;
const baseConfig = require("./webpack.config");

module.exports = merge(baseConfig, {
    mode: "production"
});
复制代码

最后再改 package.json

"dev": "webpack --config webpack.dev.config.js",
"pro": "webpack --config webpack.pro.config.js"
复制代码

这样就可以了，编译后差别就出来了。

03. 命令行模式

肯定不是直接使用全部命令行，是用命令行辅助生成 config.

命令行接口（CLI） 这里是具体文档，在这里就可以传入环境变量，以及flag

我们就改一下代码。

新建 webpack.env.config.js

const merge = require("webpack-merge").merge;
const baseConfig = require("./webpack.config");

module.exports = env => {

    console.log(env);
    
    let config = {};
    config.mode = env.development ? "development" : "production";
    if(!env.min) {
        config.devtool = 'source-map';
    }
    
    return merge(baseConfig, config);
    
}
复制代码

我设置了两个参数 development & min, 下面就是调用代码

webpack --config webpack.env.config.js --env=development --env=min
复制代码

这样就可以控制生成的模式以及是否开启 source map。

这就是可以通过环境变量做的事情，通过环境变量和我们编写的配置，可以更加灵活的配置 config。

04. webpack.definePlugin

www.webpackjs.com/plugins/def…

这是官方文档，webpack 中自带了这个插件，其实本质上就是给 webpack 代码一个环境变量的，毕竟纯前端项目怎么来的环境变量

new webpack.DefinePlugin({
  wao: JSON.stringify("aaaa")
})
复制代码

然后在代码中使用

console.log(wao);
复制代码

当你编译后就变成

console.log("aaaa");
复制代码

需要注意的是

• 如果value是一个字符串，它将会被当做code片段
• 如果value不是字符串，它将会被stringify(包括函数)
• 如果value是一个对象，则所有key的定义方式相同。
• 如果key有typeof前缀，它只是对typeof 调用定义的。

所以我用了 JSON.stringify

其实也挺简单的，那他是怎么事项两端同步环境变量呢,我开始以为有什么高端的办法..

原来是引入同一个文件，你通过引入 config 即可。

04. 总结

环境变量大家都知道，系统里都有，不管是 windows 还是 linux 之类的。 但是如果要明白你需要明白环境变量的范围。

1. 普通配置的系统的环境变量就是基于系统的
2. 后端代码中（java，nodejs）之类的，他的环境变量仅仅存在于代码的生命周期
3. webpack 命令行中的环境变量，仅仅存在配置文件当中，也就是传入的 env
4. webpack.DefinePlugin 也仅仅是在 webpack 这个工具中，给 JavaScript 创造了一个环境变量，其实你也可自己弄，创建一个文件即可。只是不需要每次都引入

多端同步就是 webpack 引入你后端代码的 .env 文件，从而实现了两边使用同一套环境变量。

所以都是环境变量但是用处是不同的。

3是用于环境变量的灵活配置。
4是针对于代码的。

所以根据第3点来灵活调整自己的配置策略，也可以根据第4点来做一些不同模式下不同的代码。

大概就是这样