Seperate Babel Polyfills from Main Code when bundling

Question

I am using Webpack and Babel. Babel is generating a single file main.js in my output directory with all the polyfills added along side my js files. I would like to separate the polyfills from the main code into two different files. polyfills.js and main.js.

Is this possible?

My current webpack config looks like:


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']
                }
            }
        }
    ]
    }
  };

and my BabelRC looks like:

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

Sofien Joulak · Answer 1 · 2020-10-10T10:03:26.070

yes it's possible

just use SplitChunksPlugin like

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']
                }
            }
        }
    ]
    },
};

More info here https://v4.webpack.js.org/plugins/split-chunks-plugin/#optimizationsplitchunks

You can use BundleAnalyzerPlugin if you want to analyse & visualize the content of your build

Thanks for the reply, unfortunately it didn't work they still ended up in the main.js Asset Size Chunks Chunk Names main.js 304 KiB main [emitted] main main.js.map 422 KiB main [emitted] [dev] main Entrypoint main = main.js main.js.map [0] multi @babel/polyfill ./src/index.js 40 bytes {main} [built] [./src/index.js] 6.77 KiB {main} [built] — Jake Steele, Oct 08 '20 at 22:41
Same thing, I removed the import '@babel/polyfill' at the top of my index.js but they still all go into main.js. I run it using npx webpack output looks like: https://pastebin.com/BXV2jimE — Jake Steele, Oct 09 '20 at 22:39
you are right my escaping for '/' was @babel\/polyfill and it is incorrect I updated my answer with full config for clarity — Sofien Joulak, Oct 10 '20 at 10:06

Seperate Babel Polyfills from Main Code when bundling

1 Answers1