如何避免相同模块重复Webpack捆绑？

Question

我使用laravel(包括webpack)捆绑JS文件。使用BundleAnalyzerPlugin，我发现输出文件包含多个JQuery库副本，这会提高输出文件的大小。

它自己缝了几个模块，包括JQuery。

有什么想法吗?如何避免这种情况，并删除所有冗余的jquery包含？

(用更多信息更新)

束式分析仪输出图像

webpack.mix.js

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

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

mix.js('resources/assets/js/admin.js', 'public/js')

mix.webpackConfig({
    plugins: [
        new BundleAnalyzerPlugin(),
        new webpack.ProvidePlugin({ // Added as a suggestion. Makes no difference
            '$': 'jquery',
            'jQuery': 'jquery',
            'window.jQuery': 'jquery'
        })
    ],
});

admin.js

import 'jquery'
import 'toastr'

Answer 1

import 'jquery'在您的条目文件中，并将下面的块添加到您的webpack.config中

plugins: [
    new webpack.ProvidePlugin({
      '$': 'jquery',
      'jQuery': 'jquery',
      'window.jQuery': 'jquery'
    })
]

参考：Webpack提供插件