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＆amp; 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将常量传递给依赖包

1 个答案: