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 插件,该如何实现?