webpack5 watch模式时,clean-webpack-plugin 如何只删除监视到修改的文件?

webpack.config.js 文件

const { resolve } = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    mode: 'none',
    entry: './src/index.js',
    output: {
        path: resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.png$/i,
                type: 'asset',
                generator: {
                    filename: '[name][ext]'
                }
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: './src/index.ejs'
        }),
        new CleanWebpackPlugin()
    ]
}

index.ejs代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> webpack demo </title>
</head>
<body>
    <img src="<%= require('./logo.png')%>" alt="">
</body>
</html>

问题:
使用命令 webpack --watch 监控文件修改时,修改了打包入口文件index.js 这时index.ejs引用的图片logo.png 会被删除。而webpack不会再打包一次logo.png。

如果不考虑把logo.png的引用放在index.js 中,或者使用webpack-dev-server,还有没有其他的解决办法,比如判断当前是 watch模式时禁用clean-webpack-plugin 插件,该如何实现?

阅读 870
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题