Webpack：清理块 - 但只有块

Question

我正在使用 webpack (^5.44.0) 的分块功能来创建分块。这工作正常，但我提到过几天创建了很多块

-rw-r--r--    1 user  staff   135K Jul 14 14:24 home-view.7a174a95c4b6c5db7d16.js
-rw-r--r--    1 user  staff   135K Jul 21 16:35 home-view.883b7079d7003f7aa412.js
-rw-r--r--    1 user  staff   135K Jul 21 16:36 home-view.8e332e11ef50c41b6e9e.js
#redacted for better readability...

这是 webpack.mix.js（因为我使用的是 Laravel-mix）：

const mix = require('laravel-mix');
const path = require('path');

mix.webpackConfig({
    output: {
        chunkFilename: 'js/chunks/[name].[chunkhash].js'
    },
    module: {
        rules: [
            {
                test: /node_modules(?:\/|\).+\.js$/,
                loader: 'babel-loader',
                options: {
                    presets: [['@babel/preset-env', {targets: 'last 2 versions, ie >= 10'}]],
                    plugins: ['@babel/plugin-transform-destructuring', '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-transform-template-literals'],
                    babelrc: false
                }
            },
            {
                enforce: 'pre',
                test: /\.(js|vue)$/,
                loader: 'eslint-loader',
                exclude: /node_modules/
            }
        ]
    },
});

mix.js("resources/js/main.js", "public/js").vue();

mix.extract(['vue']);

if (mix.inProduction()) {
    mix
        .version();
}

如果我将其扩展到

const mix = require('laravel-mix');
const path = require('path');

mix.webpackConfig({
    output: {
        chunkFilename: 'js/chunks/[name].[chunkhash].js'
        clean: true
    },
    module: {
        rules: [
            {
                test: /node_modules(?:\/|\).+\.js$/,
                loader: 'babel-loader',
                options: {
                    presets: [['@babel/preset-env', {targets: 'last 2 versions, ie >= 10'}]],
                    plugins: ['@babel/plugin-transform-destructuring', '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-transform-template-literals'],
                    babelrc: false
                }
            },
            {
                enforce: 'pre',
                test: /\.(js|vue)$/,
                loader: 'eslint-loader',
                exclude: /node_modules/
            }
        ]
    },
});

mix.js("resources/js/main.js", "public/js").vue();

mix.extract(['vue']);

if (mix.inProduction()) {
    mix
        .version();
}

public 目录中的所有内容都被清除，甚至包括我需要的那些文件：

public
├── css
│   └── app.css
├── favicon.ico
├── fonts
│   ├── ...
├── index.php
├── js
│   ├── chunks
│   │   ...
│   ├── main.js
│   ├── manifest.js
│   └── vendor.js
├── mix-manifest.json
├── robots.txt
├── storage -> /var/www/html/storage/app/public
└── web.config

但我真的只想让 webpack 清理存储在 ./chunks

中的所有内容

Answer 1

Webpack 输出清理方法主要用于清理整个输出文件夹。但是，由于您将它与 Laravel 一起使用（我不熟悉它），一些重要文件混合在您的 public 文件夹中。我看到有两种方法可以解决这个问题。

第一个选项是您可以将您的 webpack 资产放入 public 中的其他文件夹，然后 webpack 将只清理这个 assets 文件夹：

output: {
  path: path.resolve(__dirname, 'dist/assets'),
  clean: true,
}

其他选项是将所有重要文件放在 static 文件夹下，然后将此路径从清理中排除：

output: {
  clean: {
    keep(filePath) {
      return filePath.includes('static');
    },
  },
}

Answer 2

您可以使用正则表达式保留不包含 js/chunks 的所有内容；尝试：

output: {
   clean: {
      keep: /^(?!.*js\/chunks.*$).*
   }
}

https://regex101.com/r/62cRgG/1

Webpack：清理块 - 但只有块

Webpack: Clean up chunks - but only chunks

webpack

laravel-mix