Npm 引导程序5的网页包缓慢构建

Npm 引导程序5的网页包缓慢构建,npm,webpack,twitter-bootstrap-5,Npm,Webpack,Twitter Bootstrap 5,当我在我的项目中导入引导SCS时,Webpack构建非常缓慢。它根据每一次代码更改构建所有引导依赖项。因此,我必须等待5-6秒,每节省文件。有什么方法可以缩短构建时间?可能只在bootsrap-variables.scss文件更改时构建bootsrap 以下是我的网页包配置: const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCSSAssetsPlugin = require('optim

当我在我的项目中导入引导SCS时,Webpack构建非常缓慢。它根据每一次代码更改构建所有引导依赖项。因此,我必须等待5-6秒,每节省文件。有什么方法可以缩短构建时间?可能只在bootsrap-variables.scss文件更改时构建bootsrap

以下是我的网页包配置:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const sass = require('sass');
const path = require('path');

module.exports = (env, argv) => {
    return {
        entry: {
            bundle: ['./src/index.js', './src/index.scss'],
            admin: ['./src/admin.js', './src/admin.scss'],
            print: './src/print.scss',
        },
        output: {
            path: path.resolve(process.cwd(), 'dist'),
            filename: '[name].js',
        },
        optimization: {
            minimizer: [
                new TerserJSPlugin(),
                new OptimizeCSSAssetsPlugin({
                    cssProcessorOptions: {
                        map: {
                            inline: false,
                            annotation: true,
                        },
                    },
                }),
            ],
        },
        plugins: [
            new CleanWebpackPlugin({
                cleanAfterEveryBuildPatterns: ['!fonts/**/*'],
                output: {
                    path: path.resolve(process.cwd(), 'dist'),
                },
            }),
        ],
        devtool:
            argv.mode === 'development'
                ? 'cheap-module-source-map'
                : 'source-map',
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            plugins: [
                                '@babel/plugin-proposal-class-properties',
                            ],
                            presets: ['@babel/preset-env'],
                        },
                    },
                },
                {
                    test: /\.(sa|sc|c)ss$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        {
                            loader: 'postcss-loader',
                            options: {
                                sourceMap: true,
                            },
                        },
                        'resolve-url-loader',
                        {
                            loader: 'sass-loader',
                            options: {
                                implementation: sass,
                            },
                        },
                        {
                            loader: 'sass-resources-loader',
                            options: {
                                resources: ['./src/scss/_variables.scss'],
                            },
                        },
                    ],
                },
                {
                    test: /\.(ttf|eot|woff|woff2|svg)$/,
                    use: {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'fonts',
                            publicPath: 'fonts',
                        },
                    },
                    exclude: /images/,
                },
                {
                    test: /\.(png|jpe?g|gif|svg)$/i,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]',
                                publicPath: 'img',
                                outputPath: 'img',
                            },
                        },
                    ],
                },
            ],
        },
        externals: {
            jquery: 'jQuery',
        },
    };
};