webpack ---devtool / watch

最新推荐文章于 2022-04-02 19:49:44 发布

clearNew

最新推荐文章于 2022-04-02 19:49:44 发布

阅读量221

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/s_heep/article/details/106533750

版权

webpack 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了webpack中的devtool配置，用于控制source map的生成，并强调了在production环境中使用uglifyjs-webpack-plugin时需启用source map。同时，讲解了watch模式，使得webpack在文件变化时能自动重新打包。在WebStorm中，可能需要关闭安全写入选项以确保文件保存时触发watch模式。

摘要由CSDN通过智能技术生成

devtool

webpack官网 devtool详情配置链接
webpack 的配置项：此选项控制是否生成，以及如何生成 source map。

使用时，需要注意当前环境是development还是production环境；
在使用 uglifyjs-webpack-plugin 时，你必须提供 sourceMap：true 选项来启用 source map 支持。

module.exports = {
	mode:'development/production',
	// 增加映射文件， 可以帮我们调试源码 能够显示报错的具体行和列
	devtool:'source-map', // 会生成 [name].js.map 文件
	devtool:'eval-source-map', // 不会生单独的文件， 但是可以显示行和列
	devtool:'cheap-module-source-map', // 会生单独的[name].js.map文件,但是不会映射列
	devtool:'cheap-module-eval-source-map', // 不会生成新的文件，集成在打包后的文件内，不会映射列
}

watch 及 watchOptions

webpack watch

启用 Watch 模式。这意味着在初始构建之后，webpack 将继续监听任何已解析文件的更改。Watch 模式默认关闭。监控代码的变化，只要改代码保存后就会重新打包

module.exports = {
	watch:true,
  	watchOptions:{ // watch 模式的配置项
    	aggregateTimeout: 300, // 可以理解为防抖，
    	ignored: /node_modules/, // 可以忽略对一些文件的监听，
    	poll: 1000, // 设置为true或设置数值表示 多少毫秒询问一次是否重新打包，如果监听没生效，试试这个选项吧。Watch 在 NFS 和 VirtualBox 机器上不适用。
  },
}

在 WebStorm 中保存
使用 JetBrains WebStorm IDE 时，你可能会发现保存修改过的文件，并不会按照预期触发观察者。尝试在设置中禁用安全写入(safe write)选项，该选项确定在原文件被覆盖之前，文件是否先保存到临时位置：取消选中 File > Settings… > System Settings > Use “safe write” (save changes to a temporary file first)。

欢迎指正，一起讨论学习