使用webpack时从生成的.JS文件中删除不必要的导出

时间:2018-02-05 15:51:08

标签: javascript reactjs webpack jsx

我正在编写一个使用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多个步骤。

0 个答案:

没有答案