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

Question

我使用 laravel-mix(包括 webpack)来打包 JS 文件。使用 BundleAnalyzerPlugin，我发现我的输出文件包含多个 JQuery 库副本，这增加了输出文件的大小。

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

有什么想法可以避免这种情况并删除所有多余的 jquery 包含吗？

(更新了更多信息)

Image of Bundle analyzer output

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

在您的入口文件中导入“jquery”，并将以下 block 添加到您的 webpack.config

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

引用:Webpack Provide Plugin