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
启用 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)。
欢迎指正,一起讨论学习