携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第28天，点击查看活动详情

SourceMap

为什么？

开发时我们运行的代码是应用webpack编译的。

是什么？

SourceMap（源代码映射）是一个用来生成源代h码与构建后代码一一映射的文件的方案。

他会生成一个xxx.map文件，里卖弄包含源代码与构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过xxx.map文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。

怎么用？

参考webpack.js.org/configurati…

开发模式：cheap-moudle-source-map

优点：打包编译速度快，值包含行映射
缺点没有列映射

模板：

module.exports = {
  //其他省略
  mode:"development",
  devtool:"cheap-moudle-source-map",
  }

生产模式：source-map

优点：包含行/列映射
缺点：打包编译速度更慢

module.exports = {
  //其他省略
  mode:"production",
  devtool:"source-map",
  }

再执行打包代码（npm run build(得看自己设置的是什么))，dist下的js文件夹里会多出main.map文件（这是浏览器自动加载出来的）

模块热替换插件(HotModuleReplacementPlugin)

启用热替换模块Hot Module Replacement，也被称为 HMR。

永远不要在生产环境(production)下启用 HMR

作用：改动一个文件，只对这个文件进行打包，不会再刷新整个页面

只针对js文件做优化写在配置babel里

include:path.resolve(__dirname,"路径");//只处理“路径”下的文件，其他不做处理
exclude:"node_modules",//排除node——modules中的js文件（这些文件不处理）这行代码写在配置里的new ESlint里
//不写这行代码，也有这个效果

cache 的作用：提升第二次、第三次...以后的打包

cacheDirectory:true,//开启babel缓存 cacheCompression:false,//关闭缓存的压缩

执行完npm run dev 或者npm run build之后，node_modules文件下就会出现一个.cache文件，这就是缓存文件，不用关心里面是什么样子

下面的写再ESlint插件里也要写上cache:true；开启缓存 cacheLocation:path.resolve(__dirname,"../node_modules/.cache/eslintcache"),//缓存路径，要写绝对路径，最后一层具体缓存到哪里，可以自己定义。作用：

Webpack优化