尚硅谷Webpack5入门到原理（面试开发一条龙）

eslint配置文件

具体配置

vscode安装eslint可以帮助我们在写代码的时候就能检查出eslint的错误

让vscode的eslint插件忽略哪些文件不要进行eslint检查

eslint回顾总结

babel的用法

devSever入门配置

开发环境总结

怎么启动webpack指定的配置文件

性能优化开始了(webpack高级)

css抽取的目的（生产环境优化）

1.提高资源并行加载能力，提升性能

2.防止被插入html中，网速慢的时候出现闪屏现象

css兼容处理

npm i postcss-loader postcss postcss-preset-env -D

开发模式vs生产模式小结

SourceMap（开发环境优化）

为什么

更快更有效的找到源代码错误位置

是什么

xxx.map,构建后代码与源代码的映射关系，

构建后代码出错，通过xxx.map找到源代码的位置，更快锁定错误

配置

cheap-module-source-map vs source-map

不同点：cheap只有行信息，没有列信息

source有行和列信息，所以打包更慢

提升打包构建速度（开发环境优化）

hmr,局部刷新修改的页面，不然修改局部会重新构建整个bundle

webpack5默认开启HMR. hot:true

注意js不会受hmr影响，需要加点配置的代码。

OneOf，（开发和生产都适用）

为什么：每个loader都执行，效率低

是什么：命中了loader就不往下执行了

Include/Exclude（开发和生产都适用）

为什么：第三方库已经编译过，不要编译排除掉

是什么：include，只处理xxx文件

exclude,除了xxx文件，其他都处理

配置

Cache(开发环境和生产环境)

为什么？

每次打包js都要经过Eslint和Babel编译，速度较慢

通过缓存Eslint和Babel的编译结果，是第二次打包的速度更快

是什么？

Eslint和Babel的编译结果缓存

使用