使用definePlugin将常量传递给依赖包

Question

我有三个项目是这样配置的：

1. 主应用程序
   1. 单元A
   2. 单元B

​

在我的主应用程序中，我使用DefinePlugin向我的依赖模块传递一个API，如下所示：

//webpack-1
loaders:[{
    test:/\.jsx?$/,
    exclude: /(node_modules)/,
    loader: "babel",
    query: {
        presets:["es2015","stage-2","react"]
    }
}],
plugins:[new webpack.DefinePlugin({"API_URL":"http://www.google.com"})]

然后，在我的模块A& B中，我可以使用这样的常量

axios.get(`${API_URL}/getProducts`).then(response=>console.log(response));

我迁移到webpack v2，所以我的代码配置文件更改为：

//webpack-2
rules:[{
    test:/\.jsx?$/,
    exclude: /(node_modules)/,
    loader: "babel",
    options: {
        presets:["es2015","stage-2","react"]
    }
}],
plugins:[new webpack.DefinePlugin({"API_URL":"http://www.google.com"})]

但是，当我试图在我的依赖模块上使用API_URL时，我会得到以下错误：

ReferenceError:API_URL is not defined

我做错了什么？我还需要配置什么？

Answer 1

webpack的主要配置需要配置如下：

    plugins: [
    new webpack.DefinePlugin({
        API_URL:"http://www.google.com"
        PRODUCTION: JSON.stringify(true),
        VERSION: JSON.stringify("5fa3b9"),
        BROWSER_SUPPORTS_HTML5: true,
        TWO: "1+1"
    })]

然后，在您的依赖包上，您可以这样做：

console.log('%c DEPENDENT APP! ', 'background: #222; color: #bada55');
console.info("Production:", PRODUCTION);
console.info("Version:", VERSION);
console.info("HTML5 support:", BROWSER_SUPPORTS_HTML5);
console.info("Two:", TWO);

我制作了一个github回购，并演示了如何实现它的概念。