В Webpack v4 с несколькими записями мои splitChunks не оптимизированы, если мои две страницы содержат core-js, все они получат копию

Question

Вы можете клонировать мой минимальный репо https://github.com/rockmandash/webpack-chunks-question

Или посмотреть код ниже

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');

Моя конфигурация веб-пакета:

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.

Сгенерированная папка dist выглядит следующим образом:

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

Видите ли, сгенерированные два блока содержат core-js, как я могу сделатьмой конфиг веб-пакета достаточно умен, чтобы автоматически отделять файлы core-js или других распространенных файлов от производителя?

Answer 1

Вам не нужно никуда импортировать core-js.Создайте файл .babelrc.

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

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

Добавить в веб-пакет

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

Взгляните на мое решение, там полный код.Использование core-js.Он использует только часть polyfil, когда это необходимо.https://github.com/tomik23/webpack-babel-corejs/blob/master/webpack.config.js#L17

И второе решение, необходимое в вашем коде, - это использовать spliChunks https://github.com/tomik23/photoBlog/blob/master/config/webpack.config.js#L31

PS Если вы импортируете 'core-js' таким образом;Вы загружаете весь core-js, если используете мой метод, тогда core-js выбирает только то, что нужно, а пакеты меньше.