webpack学习记录(八)-sourcemap/watch

webpack学习记录(八)-sourcemap/watch

sourcemap

source map就是我们编译后的源文件映射。当使用webpack 编译前端项目时，配置项devtool控制是否生成source map。分为以下两类。

• 内联源映射，将映射的数据之间添加在生成的文件中，在.map文件中的‘sourcesContent’字段来存放源码
• 外联源映射，将映射数据存储在单独的映射文件中，使用标记将源链接到源码，一般会去掉源码中的注释

配置

webpack.config.js

module.exports = {
	//源码映射，会单独生成一个soucemap文件，出错了会标识当前报错的列和行
	// devtool: 'source-map' //增加映射文件，可以帮我们调试代码
	// devtool: 'eval-source-map', //不会产生新的文件
    // devtool: 'cheap-module-source-map',	//不会产生列，但是是一个单独的映射
    // devtool: 'cheap-module-eval-source-map'	//不会产生新的文件，集成在打包后的文件里
}

watch

配置watch选项可以监控文件的修改，自动打包。

配置

webpack.config.js

module.exports = {
	watch: true,
	watchOptions: {
		poll: 1000	//防抖
	}
}