Question

我的环境使用Laravel混合。我正在使用CommonsChunkPlugin将node_modules提取到vendor.js中，并使用导入来生成多个后期加载模块。

现在，我想添加一组仅在IE 11中加载的IE 11 polyfill。CommonsChunkPlugin对我不起作用，因为polyfill及其所有依赖项都在polyfill.js中，或者所有共享的依赖项位于vendor.js中。我想重复这些依赖关系，以便使polyfill是独立的-即使存在重叠，polyfill.js和vendor.js都应包括其所有依赖关系。

我的Laravel混合配置看起来像这样：

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构建为两个条目（app.js和iePolyfills.js）的重叠node_modules组件。我通过以下方式解决了这个问题：

使用CommonsChunkPlugin的“ chunks”属性覆盖默认行为。
创建自己的“入口” webpack配置以覆盖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);

如何通过一个webpack配置创建两个自包含的库？

1 个答案: