Question

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

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

setup.js
loader.js
main.js

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

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

因此插入顺序为： 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
        }
    }
}

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

current status

我真正想要的是：

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

我的最后选择：

选项1：从图像中注意到，如果将vendor〜...文件按照上述指定的插入顺序重新合并到起始文件中，并且具有先入先出策略，则会生成该文件预期的输出。（我不知道这些文件是否可以在没有进一步考虑的情况下被残酷地合并）。

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

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

非常感谢您的宝贵时间！

Answer 1

经过几天的深入研究，Webpack的源代码结束了，我得出结论：无法仅通过使用Webpack包含的功能来实现这一目标，所以我写了一个插件来完全满足我的需求。 / p>

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

Webpack模块沿输出文件分布

1 个答案: