块拆分中的自定义模块目录在 Webpack 中不起作用

Question

我正在使用 webpack 构建一个项目，我想使用以下配置删除重复的自定义 materialize.js 库：

const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    entry: {
        frontend: './src/AppBundle/Resources/js/Frontend/frontend.js',
        panel: ['./src/AppBundle/Resources/js/Panel/forms.js', './src/AppBundle/Resources/js/Panel/vue/main.js']
    },
    output: {
        filename: '[name].min.js',
        path: path.join(__dirname, 'web/js')
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /node_modules|src\/AppBundle\/Resources\/js\/Vendor/,
                    name: 'vendor',
                    chunks: 'all'
                }
            }
        }
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.vue', '.json']
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            'window.$': 'jquery',
            'window.jQuery': 'jquery'
        }),
        new VueLoaderPlugin(),
        new BundleAnalyzerPlugin()
    ]
};

因此，我想得到三个文件：前端、面板和供应商（这个有 vue.js、jquery.js 和 materialize.js）

这是我的源文件夹结构：

Frontend
|_frontend.js
Panel
|_forms.js
|_vue
  |_(...).js
Vendor
|_materialize.js

在frontend.js和forms.js中我添加了jQuery:

window.$ = window.jQuery = require('jquery');

因为 jQuery 取自 node_modules，它在 vendor.js

中使用 optimization.splitChunks 附加

不幸的是我需要自定义 materialize.js 文件（修改过，不是 node_module 中的形式包），所以我在 optimization.splitChunks 中应用了它，并添加到前两个文件中:

require('../Vendor/materialize');

它工作正确，除了它在 frontend.js 和 panel.js 中附加了两次，而不是在 vendor.js 中。我只想在 vendor.js.

中拥有它

BundleAnalyzerPlugin 显示如下输出：

我想，我可以添加 materialize.js 作为供应商入口点（并从前两个文件中删除 require('../Vendor/materialize')），但不幸的是它不起作用，即物化函数不是发现，例如:

...
Uncaught TypeError: $(...).pickadate is not a function
...

在html我有一个接一个的剧本：

<script type="text/javascript" src="/js/vendor.min.js"></script>
<script type="text/javascript" src="/js/frontend.min.js"></script>

它在没有 webpack 的情况下工作正常，但现在我不知道如何让它工作正确？

Answer 1

我已经解决了。问题出在正则表达式上。 SplitChunksPlugin 没有解决：

test: /node_modules|src\/AppBundle\/Resources\/js\/Vendor/,

在有两个chunk目录的情况下，最好的办法是为每个目录分别创建两个独立的缓存组，并利用path.resolve功能：

optimization: {
    splitChunks: {
        cacheGroups: {
            commons: {
                test: path.resolve('node_modules'),
                name: 'vendor',
                chunks: 'all'
            },
            materialize: {
                test: path.resolve('src/AppBundle/Resources/js/Vendor'),
                name: 'vendor',
                chunks: 'all'
            }
        }
    }
},

最终输出：

块拆分中的自定义模块目录在 Webpack 中不起作用

Custom module directories in chunk splitting doesn't work in Webpack

javascript

jquery

materialize

webpack