我正在编写一个使用ReactJs作为前端的.NET Core Web应用程序。目前我正在使用带有babel的webpack从我的JSX源代码生成我的JS文件。我已经有了它的工作,但我注意到我目前的设置存在一个重大问题,我无法解决。
我当前的webpack配置文件如下所示:
var webpack = require("webpack");
var PROD = process.env.NODE_ENV !== "development";
module.exports = {
entry: {
firstBundle: "./src/Folder1/AFile.js",
secondBundle: "./src/Folder1/AnotherFile.js",
thirdCaseBundle: "./src/Folder2/ThisFile.js",
fourthBundle: "./src/Folder3/ThatFile.js"
},
output: {
filename: "./wwwroot/js/[name].js"
},
plugins: PROD ? [
new webpack.optimize.UglifyJsPlugin()
] : [],
resolve: {
modules: [
"src",
"node_modules",
"src/Folder1",
"src/Folder2",
"src/Folder3"
]
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: "babel-loader",
query: { presets: ["env", "react", "stage-0", "stage-2"] }
}
]
}
};
这会生成我的JS文件,但似乎包含每个模块中每个模块的每个导出函数,而不仅仅是生成包的JavaScript中包含的模块。
例如在上面我最终会在我的firstBundle.js中出现与Folder2和Folder3无关的导出,即使AFile.js中没有任何内容链接到它们。
目前这是有效的,但随着我添加更多模块和更多JS文件,随着每个输出文件的增长,它变得不可持续。我想一个解决方案是为每个捆绑包提供一个单独的webpack配置文件,并且只引用它需要的模块但我目前有超过20个捆绑包,并且不希望最终得到这个数量的配置文件(这也需要我在VSTS中添加了20多个步骤。