Создание чанков на основе модулей в Webpack 4 с помощью SplitChunksPlugin - PullRequest
Новая
       44

Создание чанков на основе модулей в Webpack 4 с помощью SplitChunksPlugin

0 голосов
/ 29 мая 2018

Создание общих кусочков не было моей сильной стороной в Webpack 3, но сейчас это более запутанно, чем когда-либо.

Чего я пытаюсь достичь:

Прежде всего, веб-пакетПриведенная ниже конфигурация относится к управлению зависимостями javascript для темы Wordpress.

У меня есть только одна точка входа, которая включает в себя несколько модулей, некоторые из которых используются на определенных страницах.

Итак, во-первых, мне нужно создать отдельные чанки для таких модулей, как скользкий слайдер (полезно только на странице продукта), во-вторых, другие общие модули из 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: {},
};
...