webpack:多个入口点

Question

我正在查看这个 webpack配置文件,我不太明白如果给出了多个入口点会发生什么(如下例所示).

是否这样入口点作为依赖搜索的起点,然后结果依赖关系的并集最终是在捆绑中？

'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"]

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

Answer 1

究竟!!

正如您在此示例中所看到的,使用多个入口点,您可以从选择的入口点开始创建2个或更多个束.但是,您可能会在捆绑包中重复(或更多)您的依赖项代码.此配置目前无需任何优化即可执行此任务.

在链接的示例中,它使用公共块插件创建另一个包含公共条目代码的包(在其他包之前包含),对多页webapp很有用.

如果要添加公共块插件,只需将此代码添加到配置中:

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

在这个页面上可以找到更多的例子(比如多个公共块)

关于准入论点:

• 如果你传递一个String(entry: 'entry.js'),webpack会从它开始创建一个bundle.
• 如果传递一个array(entry: ['entry1.js', 'entry2.js']),它会从entry2开始创建一个bundle,名为entry2,并加载(和解析)entry1.
• 如果你传递一个object(entry: {entry1: 'entry1.js', entry2: 'entry2.js'}),它会从条目开始创建两个不同的bundle,并命名为object的入口键.
• 如果你使用这样的混合模式entry: {entry1: 'entry1.js', entry2: ['entry2_1.js', 'entry2_2.js'] },webpack从entry1.js开始创建一个名为entry1的包,从entry2_2.js创建另一个名为entry2的包,但是加载firt entry2_1.js.

请注意,传递一个条目数组,只导出最后一个,只加载其他js.