Как создать две автономные библиотеки из одной конфигурации веб-пакета?

Question

В моей среде используется смесь Laravel. Я использую CommonsChunkPlugin для извлечения node_modules в vendor.js и использую импорт для генерации нескольких модулей поздней загрузки.

Теперь я хочу добавить набор полифилов IE 11, который будет загружен только в IE 11. CommonsChunkPlugin у меня не работает, потому что либо полифилл и все его зависимости находятся в polyfill.js, либо все общие зависимости находятся в vendor.js. Я хотел бы продублировать зависимости, чтобы полифилл был автономным - polyfill.js и vendor.js должны включать все свои зависимости, даже если они перекрываются.

Мой конфиг Laravel Mix выглядит примерно так:

const mix = require('laravel-mix');
const webpack = require('webpack');

let webpackConfig = {
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'js/vendor',
            minChunks: function(module) {
                if (module.resource) {
                    if (/whatwg-fetch|babel-polyfill/.test(module.resource)) {
                        return false;
                    }
                }
                return /node_modules/.test(module.context);
            }
        }),

        // This doesn't work, because most of babel-polyfill is dependencies. Only the base file is extracted from vendor.
        new webpack.optimize.CommonsChunkPlugin({
            name: 'js/iePolyfill',
            minChunks: function(module) {
                return /node_modules\/babel-polyfill|whatwg-fetch/.test(module.context);
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'js/manifest',
            minChunks: Infinity
        })
    ],
};

mix
    .webpackConfig(webpackConfig)
    .react('resources/assets/js/app.js', 'public/js');

Я импортирую этот файл из основной точки входа (assets / js / app.js)

import 'babel-polyfill';
import 'whatwg-fetch';

Я также пытался не импортировать его.

Answer 1

Я понял это. CommonsChunkPlugin создавал vendor.js как перекрывающийся компонент node_modules двух записей (app.js и iePolyfills.js). Я исправил это:

• Использование свойства "chunks" CommonsChunkPlugin для переопределения поведения по умолчанию.
• Создание моей собственной "входной" конфигурации веб-пакета для переопределения поведения Laravel Mix.
• Мне также пришлось добавить конфигурацию «модуля», потому что я больше не мог использовать ярлык Laravel Mix .react ().

Вот исправленный конфиг:

    const mix = require('laravel-mix');
    const webpack = require('webpack');

    let webpackConfig = {
        entry: {
            iePolyfill: './resources/assets/js/iePolyfill.js',
            app: './resources/assets/js/app.js',
        },
        output: {
            filename: 'js/[name].js'
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                name: 'js/vendor',
                chunks: ['app'],
                minChunks: function(module) {
                    return /node_modules/.test(module.context);
                }
            }),
            new webpack.optimize.CommonsChunkPlugin({
                name: 'js/manifest',
                minChunks: Infinity
            })
        ],
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    use: "babel-loader",
                    exclude: /node_modules/
                }
            ],
            loaders: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'babel',
                    query: {
                        presets: ['es2015','react']
                    }
                }
            ]
        }
    };

    mix.webpackConfig(webpackConfig);