reactjs应用程序的webpack配置中多个入口点的多个模块答案

【问题标题】：Multiple modules for multiple entry points in webpack config for reactjs appreactjs应用程序的webpack配置中多个入口点的多个模块
【发布时间】：2017-05-24 11:03:16
【问题描述】：

如果有多个入口点，这是我得到的示例：

module.exports = {
    entry: {
        user1: path.join(__dirname, './client/app1.js'),
        user2: path.join(__dirname, './client/app2.js'),
        user3: path.join(__dirname, './client/app3.js')
    },
    output: {
        path: path.join(__dirname, './static/bundle/'),
        filename: '[name].js'
    },
    ...
}

但是，我对 entry 这个词感到困惑。这是否意味着入口网址？如果用户访问root，然后访问另一个页面怎么办？

例如，假设我有一个网站example.com 和另外两个页面example.com/register 和example.com/contact。现在我想获取example.com 的通用文件，并且只加载example.com/register 中的注册模块代码和example.com/contact 中的联系模块代码。入口点相同，example.com。上述解决方案是否适用于这种情况？

【问题讨论】：

标签： reactjs webpack

【解决方案1】：

但是，我对条目一词感到困惑。是入口网址的意思吗？

没有。它是 webpack 开始打包的入口。如果你的 webpack 配置中有多个条目，那么就会有多个输出包。这就是为什么您的输出在文件名中使用[name].js。

您可以确保正确的捆绑包可用于任何已加载的特定页面。

在评论中回答问题：

如果我理解您要做什么，我相信您可以使用CommonsChunkPlugin 为每个页面构建一个公共包和一个条目。

所以你的 webpack 配置可能看起来像

module.exports = {
    entry: {
        index: path.join(__dirname, './src/index.js'),
        register: path.join(__dirname, './src/register.js'),
        contact: path.join(__dirname, './src/contact.js')
    },
    output: {
        path: path.join(__dirname, './static/bundle/'),
        filename: '[name].js'
    },
    plugins: [
        new CommonsChunkPlugin("commons.js")
    ]
    ...
}

那么你的索引页面会是这样的

<html>
    <head></head>
    <body>
        ...
        <script src="static/bundle/commons.js"></script>
        <script src="static/bundle/index.js"></script>
    </body>
</html>

注册页面类似于

<html>
    <head></head>
    <body>
        ...
        <script src="static/bundle/commons.js"></script>
        <script src="static/bundle/register.js"></script>
    </body>
</html>

联系页面类似于

<html>
    <head></head>
    <body>
        ...
        <script src="static/bundle/commons.js"></script>
        <script src="static/bundle/contact.js"></script>
    </body>
</html>

【讨论】：

感谢您的回复。我怎样才能决定我有哪个条目？例如，在上述情况下，我已经描述了我的站点（example.com）的场景。你能根据这个网站配置解释一下吗？
更新了答案
感谢您的洞察力。这就是我一直在寻找的。还有一件事，我正在努力做出反应。作为 SPA，react 只有一个 index.html 文件。如何确保在每种情况下加载各自的包？
如果你有一个 SPA（react 不一定是 SPA），那么在你的 webpack 配置中有多个条目并没有太大的好处，因为只有索引实际上需要一个和其余的该站点将与索引捆绑包捆绑在一起。 Webpack 2 提供了一些 code-splitting features 可以帮助减少包大小以及何时加载哪些部分，但它全部由 webpack 和包处理，因此在将包链接到 html 时不必担心。