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

Question

我以这种方式配置了三个项目：

主应用
1. 模块 A
2. 模块 B

在我的主应用程序上，我使用 DefinePlugin 将我的依赖模块传递给 API URL，如下所示：

//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 repo 的概念证明，演示了如何实现它。

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

using definePlugin to pass constants to dependent packages

javascript

webpack

webpack-2