砥砺前行

自定义全局常量(DefinePlugin)

"scripts": {
    "build": "DEBUG=true NODE_ENV=production webpack"
}
1
2
3
new webpack.DefinePlugin({
    // 特别注意这里要JSON.stringify处理下
    NODE_ENV: JSON.stringify(process.env.NODE_ENV),
    DEBUG: JSON.stringify(process.env.DEBUG)
})
1
2
3
4
5

index.js：我们在业务代码中可以直接使用NODE_ENV和DEBUG。

console.log(NODE_ENV, DEBUG);

if (NODE_ENV === 'production') {
    console.log('Welcome to production');
}
if (DEBUG) {
    console.log('Debugging output');
}
1
2
3
4
5
6
7
8

运行yarn run build，输出结果如下：

production true
Welcome to production
Debugging output
1
2
3

自定义环境变量(EnvironmentPlugin)

EnvironmentPlugin是一个通过DefinePlugin来设置process.env环境变量的快捷方式。

// 设置默认值的对象，如果在process.env中对应的环境变量不存在时将使用指定的默认值
new webpack.EnvironmentPlugin({
    // 不同于DefinePlugin，默认值将被EnvironmentPlugin执行JSON.stringify
    NODE_ENV: process.env.NODE_ENV,
    DEBUG: process.env.DEBUG
})
1
2
3
4
5
6
console.log(process.env.NODE_ENV, process.env.DEBUG);

if (process.env.NODE_ENV === 'production') {
    console.log('Welcome to production');
}
if (process.env.DEBUG) {
    console.log('Debugging output');
}
1
2
3
4
5
6
7
8

运行yarn run build，输出结果如下：

production true
Welcome to production
Debugging output
1
2
3

← 22. 打包自定义的第三方库→