开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情 今天复习了一下webpack的知识点，针对webpack把复习的知识点做了如下总结，有的自己也不是很懂，先记下来，慢慢钻研。
SourceMap
为什么？
开发时我们运行的代码是英国webpack编译的。
是什么？
SourceMap（源代码映射）是一个用来生成源代h码与构建后代码一一映射的文件的方案。
他会生成一个xxx.map文件，里面弄包含源代码与构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过xxx.map文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。
怎么用？
开发模式：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")
//缓存路径，要写绝对路径，最后一层具体缓存到哪里，可以自己定义。
thread-loader:
是什么？
- 多进程打包：开启电脑的多个进咸亨同时干一件事，速度更快。
- 需要注意：请尽在特别耗时的操作中使用，因为每个进程启动就会有大约600ms左右的开销。
怎么用？
利用node.js的os模块直接进行配置，配置如下 1、获取cpu的核数，一位内每个电脑都不一样
- const os=require('os')
- 获取cpu核数
- const threads = os.cpus().length.
2、下载包：npm install --save-dev thread-loader
- 压缩js
- 步骤：安装插件
1、先引入
const TerserWebpackPlugin = require('terser-webpack-plugin');
2、调用插件
new TerserWebpackPlugin()
3、传入配置
`new TerserWebpackPlugin({parallel:threads})`
//这是cpu的核数，每个配置都不一样，不一定会配置什么
4、再进行打包
减少代码体积
直接在main.js入口文件引入时，引入自己想打包的内容就可以，系统内置了这个功能，引入之后，直接执行npm run build就可以，就会看到dist对应的文件下只有刚刚打包的内容
压缩图片插件
下载包：
npm install image-minimizer-webpack-plugin imagemin --save-dev
推荐使用无损压缩
npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo --save-dev
- 难点：下载图片压缩包比较难。
- 下下来之后，进行配置就可以了。（开发模式和生产模式都可以做压缩）
npm init -y下载依赖 执行完命令会出现一个package.json文件
npm i webpack webpack-cli -D下载webpack和webpack-cli 执行完命令，也会多出相应的文件
