捆绑时将Babel Polyfills与主要代码分开

问题描述

我正在使用Webpack和Babel。 Babel在我的输出目录中生成了一个文件main.js，其中所有polyfill都与我的js文件一起添加。我想将polyfills与主要代码分离成两个不同的文件。 polyfills.js和main.js。

这可能吗？

我当前的webpack配置如下：

module.exports = {
    entry: ['@babel/polyfill','./src/index.js'],output: {
         path: path.resolve('./dist'),filename: 'main.js',},mode: 'development',devtool: 'source-map',devServer: {
        contentBase: path.join(__dirname,'dist'),compress: true,port: 9000
    },optimization: {
        minimize: true,module: {
    rules: [
        {
            test: /\.m?js$/,exclude: [/node_modules/],use: {
                loader: 'babel-loader',options: {
                    presets: ['@babel/preset-env'],plugins: ['@babel/plugin-transform-runtime']
                }
            }
        }
    ]
    }
  };

我的BabelRC看起来像：

{
    "presets": [
        ["@babel/preset-env",{
            "useBuiltIns": "entry","debug":false,"corejs": "3.6.5","targets": {
                "chrome": "38"
            }
        }]
    ],"compact": true
}

解决方法

是有可能

只需使用SplitChunksPlugin之类的

module.exports = {
    entry: ["@babel/polyfill",'./src/index.js'],output: {
        path: path.resolve('./dist'),},mode: 'development',devtool: 'source-map',devServer: {
        contentBase: path.join(__dirname,'dist'),compress: true,port: 9000
    },optimization: {
        minimize: true,splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/](@babel[\\/]polyfill)[\\/]/,name: 'vendor',chunks: 'all',enforce: true
                },}       
    },module: {
    rules: [
        {
            test: /\.m?js$/,exclude: [/node_modules/],use: {
                loader: 'babel-loader',options: {
                    presets: ['@babel/preset-env'],plugins: ['@babel/plugin-transform-runtime']
                }
            }
        }
    ]
    },};

此处更多信息https://v4.webpack.js.org/plugins/split-chunks-plugin/#optimizationsplitchunks

如果要分析和可视化构建内容，可以使用BundleAnalyzerPlugin