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

Question

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

1. 主应用
   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并通过概念验证来展示如何实现。