作者注：由于教程中展示的图片为github仓库图片，网速慢的朋友请移步《webpack4 系列教程(十四)：Clean Plugin and Watch Mode》原地址。更多欢迎到我的小站查看更多原创内容：godbmw.com，进行“姿势”交流?(^?^*)0。课程介绍及资料>>>本课源码>>>本节所有课程源码本课代码目录如下：本课使用的plugin和loader的配置文件package.json如下如下：{“devDependencies”：{“clean-webpack-plugin”：“^0.1.19”，“html-webpack-plugin”：“^3.2.0”，“webpack”：“^4.16.1”}}1.什么是CleanPlugin和WatchMode？在实际开发中，由于需求的变化，会经常更改代码，然后用webpack打包发布。由于改动太多，我们/dist/目录下的很多版本的代码会乱七八糟的堆起来。为了使打包目录更加简洁，此时需要CleanPlugin在每次打包前自动清理/dist/目录下的文件。另外，借助webpack命令本身的命令参数，可以开启WatchMode：监控你所有的文件，如果有文件发生变化，会立即自动重新打包。2.编写入口文件和js脚本入口文件app.js代码：console.log("Thisisentryjs");//ES6importsumfrom"./vendor/sum";console.log("sum(1,2)=",sum(1,2));//CommonJsvarminus=require("./vendor/minus");console.log("minus(1,2)=",minus(1,2));//AMDrequire(["./vendor/multi"],function(multi){console.log("multi(1,2)=",multi(1,2));});vendor/sum.js:exportdefaultfunction(a,b){returna+b;}vendor/multi.js:define(function(require,factory){“usestrict”;returnfunction(a,b){returna*b;};});vendor/minus.js:module.exports=function(a,b){returna-b;};3.编写webpack配置文件CleanWebpackPlugin参数传入一个数组，其中每个元素是每次需要清空的文件目录。需要注意的是CleanWebpackPlugin要放在plugin配置项的末尾，因为webpack的配置是倒序的（最后的配置先执行）。确保在每次正式打包前，将原始打包文件清空。constwebpack=require("webpack");constHtmlWebpackPlugin=require("html-webpack-plugin");constCleanWebpackPlugin=require("clean-webpack-plugin");constpath=require("路径");模块。exports={entry:{app:"./app.js"},output:{publicPath:__dirname+"/dist/",//js引用路径或CDN地址path:path.resolve(__dirname,"dist"),//打包文件的输出目录filename:"[name]-[hash:5].bundle.js",chunkFilename:"[name]-[hash:5].chunk.js"},plugins:[newHtmlWebpackPlugin({filename:"index.html",template:"./index.html",chunks:["app"]}),newCleanWebpackPlugin(["dist"])]};执行webpack打包，控制台会先输出相关文件夹清空的提示，如下图：4.启用WatchMode，只需要在webpack命令后加上--watch参数：webpack--watch。控制台提示用户“打开手表”。我改了一次文件，webpack检测到改了，会自动重新打包。如下图所示：如果想查看详细的打包过程，可以使用：webpack-w--progress--display-reasons--color。控制台会以彩色的形式显示打包过程，看起来很酷：
