使用SplitChunksPlugin

Question

在Webpack 3中创建常见的块并不是我的强项，但现在比以往更加混乱。

我想要实现的目标：

首先，下面的webpack配置涉及Wordpress主题的javascript依赖关系的管理。

我只有一个入口点，其中包括几个模块，其中一些模块在特定页面中使用。

首先，我需要为模块创建单独的块，例如光滑滑块（仅在产品页面中有用），其次来自node_modules的其他常见模块（如jquery）将包含在vendor.js包中，最后要包括其余的模块在app.js包中。

当前配置会生成3个捆绑包：app，slick，simplebar。

任何想法配置有什么问题？

const webpack = require("webpack");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
// Where to start bundling
entry: {
    app: "./js/assets/src/app.js",
},

// Where to output
output: {
    // Output to the same directory
    path:  __dirname + '/js/assets/dist',

    // Capture name from the entry using a pattern
    filename: "[name].[chunkhash].js",
},
optimization: {
    splitChunks: {
        cacheGroups: {
            commons: {
                test: /[\\/]node_modules[\\/]/,
                name: "vendor",
                chunks: "initial",
                priority: -10,
                reuseExistingChunk: true,
            },
            simplebar: {
                test: /[\\/]node_modules[\\/]simplebar[\\/]/,
                name: "simplebar",
                chunks: "all",
            },
            slick : {
                test: /[\\/]node_modules[\\/]slick-carousel[\\/]/,
                name: "slick",
                chunks: "all",
            },
        },
    },
},
// How to resolve encountered imports
module: {
    rules: [
        {
            test: /\.css$/,
            use: ["style-loader", "css-loader"],
        },
        {
            test: /\.js$/,
            use: "babel-loader",
            exclude: /node_modules/,
        },
        {
            test: require.resolve('jquery'),
            use: [{
                loader: 'expose-loader',
                options: 'jQuery'
            },{
                loader: 'expose-loader',
                options: '$'
            }]
        }
    ],
},
devtool: 'source-map',
// What extra processing to perform
plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
    }),
    new CleanWebpackPlugin(['js/assets/dist']),
    new UglifyJSPlugin({
        sourceMap: true
    }),
    new BundleAnalyzerPlugin({
        analyzerMode: 'static'
    })
],

// Adjust module resolution algorithm
resolve: {},
};