CODEWITHSUNDEEP
javascriptwebpack
Joseph
Joseph

Reputation: 4705

In Webpack v4 with multiple entries, my splitChunks is not optimized, if my two pages includes core-js, they will all get a copy

You can clone my minimum repo https://github.com/rockmandash/webpack-chunks-question

Or see the code below

page1.js

import 'core-js';

console.log('I am page1');

page2.js

import 'core-js';
import 'react';
import 'react-dom';

console.log('I am page2');

My webpack config:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const entriesFilePath = [
  require.resolve('./src/page1.js'),
  require.resolve('./src/page2.js'),
];

const mode = 'development';

const webpackConfig = entriesFilePath.map((entrieFilePath) => {
  const fileName = path.basename(entrieFilePath, path.extname(entrieFilePath));
  // fileName would be page1 and page2

  return {
        mode,
        devtool: 'cheap-module-source-map',
    entry: {
      [fileName]: entrieFilePath,
    },
    output: {
      filename: 'static/js/[name].js',
      chunkFilename: 'static/js/[name].chunk.js',
    },
    optimization: {
      splitChunks: {
        chunks: 'all',
      },
    },
    plugins: [
      // Generates an `index.html` file with the <script> injected.
      new HtmlWebpackPlugin(
        Object.assign(
          {},
          {
            inject: true,
            filename: `${fileName}.html`,
          },
        ),
      ),
    ].filter(Boolean),
  };
});

module.exports = webpackConfig; // I have to export an array, because in the future, I need to do something else.

The generated dist folder looks like this:

dist
  /page1.html
  /page2.html
  /static
    /js
      /page1.js.map
      /vendors~page2.chunk.js.map
      /vendors~page1.chunk.js // this includes core-js !!!!
      /page1.js
      /page2.js
      /vendors~page1.chunk.js.map
      /vendors~page2.chunk.js // this includes core-js too !!!!
      /page2.js.map

You see, the generated two chunks both includes core-js, how can I make my webpack config smart enough to automatically separate core-js or other common vendor files out of the box?

Upvotes: 1

Views: 1068

Answers (1)

Grzegorz T.
Grzegorz T.

Reputation: 4113

You do not need to import core-js anywhere. Create a .babelrc file.

{
  "presets": [
    [
     "@babel/preset-env",
     {
      "debug": true,
      "useBuiltIns": "usage",
      "corejs": 3
     }
    ]
  ]
}

Instal @babel/core, @babel/polyfill, @babel/preset-env, babel-loader

Add to webpack

const optimization = {
   splitChunks: {
      cacheGroups: {
        vendor: {
         test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
         name: 'vendor',
         chunks: 'all',
        }
      }
   }
};

module: {rules: [{
  test: /\.js$/,
   exclude: /node_modules/,
    use: {
      loader: 'babel-loader'
    }
  }
]},

Take a look at my solution, there is a complete code. Use of core-js. He uses only part polyfil when it is needed. https://github.com/tomik23/webpack-babel-corejs/blob/master/webpack.config.js#L17

And the second solution needed in your code is to use spliChunks https://github.com/tomik23/photoBlog/blob/master/config/webpack.config.js#L31

P.S. If you import 'core-js' in this way; you download the whole core-js if you use my method then core-js chooses only what is needed and packages are smaller.

Upvotes: 1

Related Questions