CleanWebpackPlugin最新版本使用问题
2024-09-07 09:40:51
如果在webpack 安装 CleanWebpackPlugin最新版本报错
如果是报下面的错误的话
然后在控制台向上翻
会发现 TypeError: CleanWebpackPlugin is not a constructor 错误❌
如图
========= 解决办法 ===========
清理 /dist 文件夹
你可能已经注意到，由于过去的指南和代码示例遗留下来，导致我们的 /dist 文件夹相当杂乱。webpack 会生成文件，然后将这些文件放置在 /dist 文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。
通常，在每次构建前清理 /dist 文件夹，是比较推荐的做法，因此只会生成用到的文件。
安装： npm install clean-webpack-plugin --save-dev
老版本CleanWebpackPlugin的用法
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
+ new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
现在执行 npm run build，再检查 /dist 文件夹。如果一切顺利，你现在应该不会再看到旧的文件，只有构建后生成的文件！
如果一切没这么顺利，比如报错：CleanWebpackPlugin is not a constructor
新版本用法
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
+ new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
参考：https://www.jianshu.com/p/ed14e6ed7ad9
最新文章
- 利用XML FOR PATH 合并分组信息
- [转]Windows平台下Makefile学习笔记
- YbSoftwareFactory 代码生成插件【十九】：实体类配合数据库表字段进行属性扩展的小技巧
- Fourth glance in Go
- java正则表达式 --简单认识
- ICMP type code 对应表(转)
- js 选项卡实现
- Ubuntu安装nodeJS
- 第十篇、Swift -- WebSocket
- 【最短路】NEERC15 F Froggy Ford(2015-2016 ACM-ICPC)(Codeforces GYM 100851)
- Oracle Product Hub / Product Lifecycle Management / Product Information Management / Advanced Produc
- CentOS6.4安装go环境
- myeclipse连接hadoop集群编程及问题解决
- Eclipse 打开文件所在文件夹
- 20155304 2016-2017-2 《Java程序设计》第五周学习总结
- ArrayList与Vector的区别
- 企业级playbook的使用
- Android 开发 将window变暗
- Linux——awk命令解析
- 零拷贝sendfile解析