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

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,
 }