在webpack中传递环境因变量

Question

在webpack中传递环境因变量我正在尝试将一个角度很大的应用程序从GUP转换为WebPack。在GULP中，根据node_env的不同，我使用glp预处理来替换html页面中的一些变量(例如数据库名)。用WebPack实现类似结果的最佳方法是什么？

Answer 1

实现这一目标有两种基本方法。

DefinePlugin

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')}),

请注意，这将只替换匹配的“原样”。这就是为什么字符串采用它的格式。你可以有一个更复杂的结构，比如一个物体，但是你明白了。

环境插件

new webpack.EnvironmentPlugin(['NODE_ENV'])

EnvironmentPlugin使用DefinePlugin内部，并将环境值映射为代码。简洁的语法。

化名

或者，您可以通过别名模块..从消费者的角度来看，它应该是这样的：

var config = require('config');

配置本身可以如下所示：

resolve: {
    alias: {
        config: path.join(__dirname, 'config', process.env.NODE_ENV)
    }}

比方说process.env.NODE_ENV是development..它会映射到./config/development.js然后。它映射到的模块可以像这样导出配置：

module.exports = {
    testing: 'something',
    ...};

Answer 2

只是另一个选项，如果您只想使用cli接口，只需使用define可供选择的网页包。我在我的package.json :

"build-production": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors"

所以我只能跑了npm run build-production.