node.js - Webpack模块沿着输出文件分布

Question

我是Webpack和Babel的新手，但是我认为我已经非常了解如何使用它们，尽管仍然有我无法解决的一件事。

这是问题所在...本质上，我有3个javascript文件：


setup.js
loader.js
main.js


setup.js是链接到我的html页面的唯一文件，它包含一个轻量级脚本，该脚本可动态插入一些所需的资源，包括loader.js。

loader.js有点重，它负责根据某种逻辑下载并插入所有剩余资源，最后包括main.js，其中包含我的其余代码。

因此插入顺序为：setup.js-> loader.js-> main.js

我在Webpack中使用babel-loader来转译和填充这3个文件（使用@ babel / preset-env和core-js 3.0.0）

问题是，显然，我不想在这些文件上重复代码，也不想在上述结构中添加更多文件。

我目前使用以下配置将这3个文件作为入口对象提供给Webpack：

（注意：我动态生成Webpack配置，但是在这种情况下，生成的简化对象将如下所示。）

{
    entry: {
        setup: 'path/to/setup.js',
        loader: 'path/to/loader.js',
        main: 'path/to/main.js',
    },
    mode: 'development',
    output: {
        filename: '[name].js',
        path: 'output/path'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    useBuiltIns: 'usage',
                                    corejs: {
                                        version: '3.0.0',
                                        proposals: false
                                    }
                                }
                            ]
                        ],
                        configFile: false,
                        babelrc: false
                    }
                }
            }
        ]
    },
    watch: false,
    node: false,
    optimization: {
        splitChunks: {
            chunks: 'all',
            minSize: 0
        }
    }
}

通过这种配置，我设法有效地避免了重复，这是对默认配置的改进（没有自定义优化，即使每个文件也包含在其他文件中，每个文件都会获得其所需的模块），但是我正在模块在单独的文件中：



我真正想要的是：

setup.js进行转储和填充，然后loader.js但是忽略setup.js中已经插入的模块，最后main.js但是仍然忽略前两个文件中插入的模块。每个文件包含相应的模块（而不是单独的文件）

我最后的选择：

选项1：从图像中注意到，如果按照上述指定的插入顺序，使用require-first策略将vendor〜...文件重新合并到起始文件，它将生成预期的输出。 （我不知道这些文件是否可以未经进一步考虑而残酷地合并）。

选项2：我当时想将Babel与Webpack分开...使用Babel在每个文件中分别添加所有require语句。然后读取文件并按顺序删除重复的require语句。然后，将文件独立传递到Webpack。但是我真的希望有一个更简单的选择！ （此选项显然可以达成协议，但是不可能优化模块依赖关系的分布（不同的模块可能具有相同的依赖关系，可以重复（？），但是我认为这是可以接受的（？））

任何解决方案，建议或建议，我将不胜感激。

非常感谢您的宝贵时间！

Answer 1

经过几天深入研究Webpack的源代码，我得出结论，仅使用Webpack包含的功能是无法实现此目的的，因此我编写了一个插件，可以完全满足我的需求。

您可以找到它HERE。以防万一将来可能对某人有用。