webpack: 多个入口点

Question

我正在查看 这个 webpack 配置文件，但我不太明白如果有多个入口点会发生什么（如下面的示例所示）。

是这样吗，入口点作为依赖搜索的起点，然后将结果依赖的并集打包到 bundle 中？

'use strict';

var webpack = require('webpack');

module.exports = {

    entry: [
        'webpack/hot/only-dev-server',
        './index.js'
    ],
    output: {
        path: __dirname + '/build',
        publicPath: __dirname  + "/build/",
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]


};

我查看了这个文档，但它没有解释上面的配置是做什么的。

此外，这里写道：

如果你传递一个数组：所有模块在启动时都会被加载。最后一个模块将被导出。

entry: ["./entry1", "./entry2"]

加载模块和导出模块有什么区别？

- jhegedus

Answer 1

没错！！

正如你在这个示例中所看到的，使用多个入口点可以从所选的入口点开始创建2个或多个捆绑包。但是，您可能会在捆绑包中重复（或更多）使用依赖项代码。目前，您的配置执行此任务而不进行任何优化。

在链接的示例中，它使用常见块插件创建另一个捆绑包，其中包含条目的公共代码（在其他内容之前包括），适用于多页面 Web 应用程序。

如果要添加常见块插件，只需将此代码添加到配置文件中：

plugins: [
    new CommonsChunkPlugin({
        filename: "commons.js",
        name: "commons"
    })
]

在此页面可以找到更多示例（例如多个共同块）。

关于entry参数：

• 如果您传递一个字符串 (entry: 'entry.js')，Webpack将从它开始创建一个捆绑包。
• 如果您传递一个数组 (entry: ['entry1.js'，'entry2.js'])，它将从entry2开始创建一个名为entry2的捆绑包，并加载（和解析）entry1。
• 如果您传递一个对象 (entry: {entry1: 'entry1.js'，entry2: 'entry2.js'})，它将从条目创建两个不同的捆绑包，并以对象的entry key命名。
• 如果您使用这样的混合模式 entry: {entry1: 'entry1.js'，entry2: ['entry2_1.js'，'entry2_2.js']} ，Webpack将创建一个名为entry1的捆绑包，从entry1.js开始，并从entry2_2.js开始创建另一个名为entry2的捆绑包，但首先加载entry2_1.js。

请注意，传递入口的数组时，只有最后一个被导出，其他js仅被加载。

- TeoMatthew

---

非常感谢！在“请注意，传递一个条目数组时，只有最后一个被导出，其他JS仅被加载。”中，“加载”和“导出”的区别是什么？ - jhegedus

导出意味着那些JavaScript组成的包，在加载时仅被解析。这个问题中也有类似的解释：https://dev59.com/TVwY5IYBdhLWcg3wh4Pc - TeoMatthew

@TeoMatthew，你救了我的命！我可以在这种方法中使用各种插件来处理不同的入口点吗？ - Dayan

@Dayan 喜欢 'webpack/hot/only-dev-server' 吗？是的，可以使用类似这样的代码：entry: {entry1: 'entry1.js', entry2: ['plugin1', 'plugin2', 'entry2.js'] } - TeoMatthew

注意：CommonsChunkPlugin已经被弃用。请使用以下插件代替：https://webpack.js.org/plugins/split-chunks-plugin/ - Tom Roth

Answer 2

好的，它会分别处理每个入口点。它将包含所有需要的依赖项，这意味着如果两个入口点都使用jquery，则两者都将将其放入自己的捆绑包中。但正如前面所说，在这里，您可以使用commonchunks插件。它将在某个特定点（您可以决定所需的数量）将多次使用的模块移动到某个公共模块。

- stian64