javascript - React 构建多个文件

Question

有没有办法在 webpack 构建期间将 React/Redux 应用程序拆分为模块？假设我有一些与用户相关的组件和与发票相关的其他组件。我希望 webpack 构建 users.js 和 Invoices.js，我可以将它们导入到 index.html，并且由于我可能会更改一些与用户相关的组件，因此我只需在生产服务器上交换 users.js，而保持 Invoices.js 不变。

这样的模块化可以实现吗？非常感谢任何类型的回答

Answer 1

您正在寻找的是多个入口点

在此示例中，您有两个 (HTML) 页面用户和发票。您想要为每个页面创建单独的 bundle 。除此之外，您还想创建一个共享包，其中包含两个页面中使用的所有模块(假设有许多/大的共同模块)。这些页面还使用代码分割来按需加载较少使用的部分功能。

var path = require("path");
var webpack= require("webpack");
module.exports = {
    entry: {
        users: "./users",
        invoices: "./invoices"
    },
    output: {
        path: path.join(__dirname, "js"),
        filename: "[name].bundle.js",
        chunkFilename: "[id].chunk.js"
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            filename: "commons.js",
            name: "commons"
        })
    ]
}

这里有更详细的example来自 webpack 本身