我正在尝试将一个angular应用程序从gulp转换为webpack。在gulp中,我使用gulp预处理来替换html页面中的一些变量(例如数据库名称),这取决于NODE_ENV。用webpack实现类似结果的最佳方法是什么?


当前回答

我发现下面的解决方案是最容易为Webpack 2设置环境变量:

例如,我们有一个webpack设置:

var webpack = require('webpack')

let webpackConfig = (env) => { // Passing envirmonment through
                                // function is important here
    return {
        entry: {
        // entries
        },

        output: {
        // outputs
        },

        plugins: [
        // plugins
        ],

        module: {
        // modules
        },

        resolve: {
        // resolves
        }

    }
};

module.exports = webpackConfig;

在Webpack中添加环境变量:

plugins: [
    new webpack.EnvironmentPlugin({
       NODE_ENV: 'development',
       }),
]

定义插件变量并将其添加到插件中:

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

现在当运行webpack命令时,传递env。NODE_ENV作为参数:

webpack --env.NODE_ENV=development

// OR

webpack --env.NODE_ENV development

现在您可以在代码中的任何地方访问NODE_ENV变量。

其他回答

从Webpack v4开始,在Webpack配置中简单地设置模式就可以为你设置NODE_ENV(通过DefinePlugin)。文档。

我研究了几个关于如何设置特定于环境的变量的选项,最后得到了这样的结果:

我目前有2个webpack配置:

webpack.production.config.js

new webpack.DefinePlugin({
  'process.env':{
    'NODE_ENV': JSON.stringify('production'),
    'API_URL': JSON.stringify('http://localhost:8080/bands')
  }
}),

webpack.config.js

new webpack.DefinePlugin({
  'process.env':{
    'NODE_ENV': JSON.stringify('development'),
    'API_URL': JSON.stringify('http://10.10.10.10:8080/bands')
  }
}),

在我的代码中,我以这种(简要)方式获取API_URL的值:

统一文件格式

编辑2016年11月3日

Webpack文档有一个例子:https://webpack.js.org/plugins/define-plugin/#usage

new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true),
    VERSION: JSON.stringify("5fa3b9"),
    BROWSER_SUPPORTS_HTML5: true,
    TWO: "1+1",
    "typeof window": JSON.stringify("object")
})

使用ESLint,如果你有no-undef规则,你需要在代码中明确地允许未定义的变量。http://eslint.org/docs/rules/no-undef像这样:

/*global TWO*/
console.log('Running App version ' + TWO);

EDIT 2017年9月7日(Create-React-App特定)

如果您不喜欢配置太多,请查看Create-React-App: Create-React-App -添加自定义环境变量。实际上CRA使用Webpack。

dotenv-webpack

一个安全的webpack插件,支持dotenv和其他环境变量,只公开您选择和使用的内容。

通过一些基于默认选项的配置解决方案来实现这一点,一旦包有.env.defaults文件作为env变量的初始值,您就可以在开发中使用它,并让.env用于生产。

使用

安装包

npm install dotenv-webpack --save-dev

创建一个.env.defaults文件

API_URL='dev_url/api/'

创建一个.env文件,保留它为空,使用默认值,在部署过程中更新它 配置webpack - webpack. Config .js

new Dotenv({
  defaults: true 
})

开发环境测试文件。js

console.log(process.env.API_URL)
// Outputs: dev_url/api/

在构建时,更新空的.env文件

API_URL='prod_url/api/'

Dotenv-webpack将使用这个来覆盖env.defaults

产品环境测试文件。js

console.log(process.env.API_URL)
// Outputs: prod_url/api/

dotenv-webpack dotenv-defaults

你可以使用——env传递环境变量,而不需要额外的插件

Webpack -

webpack --config webpack.config.js --env.foo=bar

Webpack 5+(无)

webpack --config webpack.config.js --env foo=bar

然后,使用webpack.config.js中的变量:

module.exports = function(env) {
    if (env.foo === 'bar') {
        // do something
    }
}

进一步阅读:Webpack 2.0不支持自定义命令行参数? # 2254

我的webpack版本“webpack”:“^4.29.6”的变通方法非常简单。

//package.json
{
...
 "scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open --mode development"
  },
}

你可以在webpack命令中传递——mode参数,然后在webpack.config.js中

 // webpack.config.json
 module.exports = (env,argv) => {
        return {
           ...
           externals: {
            // global app config object
            config: JSON.stringify({
                apiUrl: (argv.mode==="production") ? '/api' : 'localhost:3002/api'
            })
        }
}

我在代码中像这样使用baseurl

// my api service
import config from 'config';
console.log(config.apiUrl) // like fetch(`${config.apiUrl}/users/user-login`)