为什么我的Webpack-cleanup-plugin会删除我的Exclude文件?

qgzx9mmu  于 2023-08-06  发布在  Webpack
关注(0)|答案(6)|浏览(103)

背景:一个简单的一页React应用程序+ redux +快递(为了上传到heroku)。

我已经有index.html和images文件夹在公共文件夹。我想运行webpack来生成我在index.html中使用的styles.css和bundle.js。我想使用webpack-clean-up-plugin在每次运行build时删除额外的以前的文件,但我不想影响index.html和images文件夹等内容。
根据文件:* 选项如果您想在输出路径中保留一些文件,例如:从其他一些插件生成的stats.json文件,使用exclude Array选项。它像在minimatch中一样接受globbing。
//不删除stats.jsonimportant.jsonfolder中的所有内容

new WebpackCleanupPlugin({
  exclude: ["stats.json", "important.js", "folder/**/*"],
})

字符串

目标:运行webpack.prod.js,使公共文件夹最终

  • index.html
  • bundle.js
  • bundle.js.map
  • styles.css
  • style.css.map
  • 图像(文件夹)
    Webpack.config.prod.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin')  
output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    }, 
    plugins: [
        new MiniCssExtractPlugin({ 
            filename: "styles.css", 
            chunkFilename: "[id].css"}),
         new CleanWebpackPlugin({
         exclude: ["index.html", "images/*"],
        })
      ],

当前结果:

每次我运行npm

"build:prod": "webpack --config webpack.config.prod.js --mode production",


我会得到我的index.html和图像文件夹删除。我哪里写错了?

xmd2e60i

xmd2e60i1#

而不是使用exlude
使用此选项

cleanOnceBeforeBuildPatterns: ["**/*", "!stats.json","!important.js", "!folder/**/*"]

字符串
这对我很有效:)。范例:

new CleanWebpackPlugin({
    root: process.cwd(),
    verbose: true,
    dry: false,
    cleanOnceBeforeBuildPatterns: ["**/*", "!stats.json","!important.js", "!folder/**/*"],
})

mutmk8jj

mutmk8jj2#

总之,在阅读了更多之后,我决定不再使用这个插件。因为人们一直在重复和我一样的问题。作者在2018年3月22日表示,他没有时间再维护我们应该解雇这个插件。view this on github

ohfgkhjo

ohfgkhjo3#

这可能是一个路径problem.you应该用'__dirname'来解决它

bprjcwpo

bprjcwpo4#

可以使用remove-files-webpack-plugin
配置:

plugins: [
  new RemovePlugin({
    before: {
      // expects what your output folder is `dist`.
      test: [
        {
          folder: './dist',
          method: () => true
        }
      ],
      exclude: [
        './dist/index.html',
        './dist/images'
      ]
    }
  })
]

字符串
注意:我是这个插件的创建者。

iqjalb3h

iqjalb3h5#

显然,未明确引用的文件将被视为陈旧文件并被删除。这对我跳过清理CopyWebpackPlugin复制的文件很有效

new CleanWebpackPlugin({
   cleanStaleWebpackAssets: false,
}),

字符串

0dxa2lsx

0dxa2lsx6#

一开始,我想创建一个脚本并将其附加到Webpack钩子上。但我很快意识到,脚本需要太多的时间来运行+还删除未更改的块。

Without cleanup script: ~1.450s
With cleanup script: ~2.300s      (too slow)

字符串
我发现了一个更好的方法来实现它,只需使用webpack.CleanPlugin(使用keep属性来排除文件):

const { CleanPlugin } = require("webpack");

module.exports = {
  ...
  plugins = [
    ...
    new CleanPlugin({
      keep: (filename) => {
        case "images":
        case "index.html":
          return true;      // true: keep the file, don't delete it
        default:            // delete everything else
          return false;
      },
    }),
  ],
};


keep接受 stringregex 或 *a返回true或false的函数 *。
请确保使用dry: true进行测试。

With cleanup script: ~2.300s
With `webpack.CleanPlugin`: ~1.497s

相关问题