Question

使用.env变量配置Webpack配置时遇到问题。
让我解释一下：我希望能够使用.env文件来配置/设置我的Webpack配置。就我而言，这是为BrowserSync设置代理URL 。这样做的目的是使更改wp-config的某些（预定义）部分变得简单/容易，而不是深入研究wp-config本身。

.env文件的示例：

APP_NAME=Test Application
PROXY_URL=test-application.test

Webpack配置示例：

module.exports = {
    plugins: [
        new BrowserSyncPlugin({
            host: 'localhost',
            port: 7777,
            proxy: PROXY_URL // inserted from .env
        })
    ],
});

我一直在摆弄webpack.DefinePlugin和Dotenv npm模块，但是它们在实际的Webpack配置中似乎无法访问（未定义）（但在应用程序本身index.js中可以正常工作等）。

我的问题是；这可行吗？实现这一目标的最简单/最干净的方法是什么？

Answer 1

这就是我使用dotenv软件包解决的方法。

首先解析.env文件：

var dotenv = require('dotenv').config({path: __dirname + '/.env'}); const devURL = dotenv.parsed.BASE_URL; const devPORT = dotenv.parsed.PORT;

然后您可以在配置中使用它。

devServer: { host: devURL || '0.0.0.0', port: devPORT || 9000, }

如何使用.env文件设置/配置Webpack配置

1 个答案: