Webpack：清理块 - 但只清理块答案

【问题标题】：Webpack: Clean up chunks - but only chunksWebpack：清理块 - 但只清理块
【发布时间】：2021-07-21 15:21:21
【问题描述】：

我正在使用 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 中的所有内容

【问题讨论】：

标签： webpack laravel-mix

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：