仅在主包中包含 webpack 辅助方法和 polyfill答案

【问题标题】：Including webpack helper methods and polyfills only in main bundle仅在主包中包含 webpack 辅助方法和 polyfill
【发布时间】：2020-06-23 18:21:36
【问题描述】：

我正在使用 webpack 来捆绑 React，但我仍然需要转译我们用纯 javascript 编写的遗留代码库。到目前为止，我已经让它工作了，但我注意到，由于 webpack 将每个 javascript 文件视为一个单独的包，它还在每个文件中注入了它的辅助方法和 polyfill。最好将它们仅包含在主 javascript 文件中，这样可以减少后续文件的大小。

有没有办法做到这一点？

如果有人好奇我是如何单独编译每个遗留 js 文件的。

            glob.sync(PATH).forEach((file) => {
                    exports.push({
                        entry: file,
                        output: {
                            path: path.resolve(__dirname),
                            filename: file,
                        },
                        module: {
                            rules: [
                                {
                                    test: /\.js$/,
                                    exclude: /node_modules/,
                                    loader: 'babel-loader'
                                }]
                        },
                        devtool: 'eval',
                    });
            });

【问题讨论】：

标签： javascript webpack babeljs polyfills transpiler

【解决方案1】：

我找到了一种方法，这就是我的当前设置的样子。

.babelrc "useBuiltIns": "entry" 使得你的 polyfill（以及辅助方法呢？）仅在请求时插入。换句话说，当您在文件顶部调用“import”时。这允许我创建一个 polyfill.js 文件，其中除了 import "core-js"; 之外什么都没有，它会变成一个更大的文件，其中包含我需要的所有 polyfill。

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "corejs": "3.6.4",
        "useBuiltIns": "entry",
        "targets": {
          "ie": "11"
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/transform-runtime"
  ],
  "sourceType": "unambiguous"
}

这些文件的 webpack 配置看起来像（exports 集合最终分配给 module.exports）。

            glob
                .sync(PATH)
                .forEach((file) => {

                        let config = {
                            entry: file,
                            output: {
                                path: path.resolve(__dirname),
                                filename: file,
                            },
                            module: {
                                rules: [
                                    {
                                        test: /\.js$/,
                                        exclude: /node_modules/,
                                        loader: 'babel-loader'
                                    }],
                            }
                        };

                        exports.push(config)
            });

不用说 polyfill.js 是我的 html 中调用的第一个脚本。

【讨论】：