背景:一个简单的页面react app + redux + express(以便上传到heroku)。
我已经在公用文件夹中有了index.html和images文件夹。我想运行webpack生成在index.html中使用的styles.css和bundle.js。我想每次运行build时都使用webpack-clean-up-plugin删除以前的多余文件,但是我不希望那会影响index.html和images文件夹之类的内容。
根据文档:
*选项
如果要在输出路径中保留一些文件,例如从其他插件生成的stats.json文件,请使用exclude Array选项。它接受minimatch中的通配符。
//请勿删除stats.json
,important.json
和folder
中的所有内容
new WebpackCleanupPlugin({
exclude: ["stats.json", "important.js", "folder/**/*"],
})
目标:运行webpack.prod.js,以便最终公用文件夹具有
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和images文件夹。那我在哪里写错了?
答案 0 :(得分:3)
代替使用exlude
使用此选项
cleanOnceBeforeBuildPatterns: ["**/*", "!stats.json","!important.js", "!folder/**/*"]
这对我有用:)。 示例:
new CleanWebpackPlugin({
root: process.cwd(),
verbose: true,
dry: false,
cleanOnceBeforeBuildPatterns: ["**/*", "!stats.json","!important.js", "!folder/**/*"],
})
答案 1 :(得分:1)
这可能是路径问题。您可以使用'__dirname'来解决它
答案 2 :(得分:1)
您可以使用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'
]
}
})
]
注意:我是此插件的创建者。
答案 3 :(得分:0)
无论如何,阅读更多内容后,我决定不再使用此插件。因为人们一直在重复与我相似的问题。作者在2018年3月22日表示,他没有时间去维护我们应该关闭此插件的时间。 view this on github
答案 4 :(得分:0)
显然,未明确引用的文件被视为过时的文件并被删除。这对我来说可以跳过清理由CopyWebpackPlugin
new CleanWebpackPlugin({
cleanStaleWebpackAssets: false,
}),