10、实时监控打包——watch的用法

watch的用法

当我们每次更新代码的时候，都需要npm run build，重新打包，非常麻烦，所以可以使用watch去监听打包

有同学说，可以直接使用devServer啊，用devServer是不能看到实体文件的，产生的文件存在内存中，我们看不到，而我们用watch去监听打包，可以直接看到打包后的文件

具体用法

//webpack.config.js中
module.exports = {
	watch:true,
	watchOptions:{//监控的选项
		poll:1000,//每秒问我1000次
		aggregateTimeout:500,//防抖 我一直输入代码，不会没输入就打包，而是输入完后500毫秒打包一次
		ignored:/node_modules/ //不需要进行监控哪个文件
	}
	...
}

弊端及解决办法

这个watch能做到的是实时监控变化，并打包生成文件，但是如果你的文件名字是含有hash的，那么每次生成的文件都不一样，这样会导致你dist目录中的文件越来越多，这是个糟糕的状况，我们需要想办法解决。

使用clean-webpack-plugin解决

clean-webpack-plugin是一个插件，会在每次打包前，先清空制定目录下的文件，然后再打包

1. 使用方法：

npm i clean-webpack-plugin -D

注意，这是一个开发依赖

//webpack.config.js
let CleanWebpackPlugin = require('clean-webpack-plugin');

plugins:[
		new CleanWebpackPlugin(['dist'],{
			root:__dirname,
			verbose: true,//是否在console中打印日志，true为是
			dry: false,//false为默认值，代表删除，true代表模拟删除，其实是不删除  
			watch: true,//默认为false，代表在此编译的时候不删除，true为删除，开启watch的时候，最好为true
			exclude: [ 'index.html' ],//表示忽略的文件

		})
	]

注意上面的配置

然后你执行npm run build之后，watch会监听，每次改动保存，会先清楚dist下除了index.html之外的所有文件，然后再编译打包生成新的文件

注意：不管你是使用npm run build 还是使用 npm run dev，前者打包出实体文件，后者打包出文件存到内存中，但这两者都会先去清理下制定目录(上述配置是dist目录)下的文件，然后再编译打包生成新的文件存到对应的实体或内存中