程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Webpack:清理块 - 但只清理块大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决Webpack:清理块 - 但只清理块?

开发过程中遇到Webpack:清理块 - 但只清理块的问题如何解决?下面主要结合日常开发的经验,给出你关于Webpack:清理块 - 但只清理块的解决方法建议,希望对你解决Webpack:清理块 - 但只清理块有所启发或帮助;

我正在使用 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
    },"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 一起使用(我不熟悉它),因此一些重要文件混合在您的公共文件夹中。我看到有两种方法可以解决这个问题。

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

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

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

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

您可以使用正则表达式保留不包含 js/chunk 的所有内容; 试试:

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

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

大佬总结

以上是大佬教程为你收集整理的Webpack:清理块 - 但只清理块全部内容,希望文章能够帮你解决Webpack:清理块 - 但只清理块所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。