如何避免相同的模塊重復Webpack捆綁？

Question

我使用laravel-mix（包括webpack）捆綁JS文件。 使用BundleAnalyzerPlugin，我發現我的輸出文件包含多個JQuery lib副本，這會增加輸出文件的大小。

它本身接縫了幾個模塊，包括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提供插件