eslint配置文件

具體配置

vscode安裝eslint可以幫助我們在寫代碼的時候就能檢查出eslint的錯誤

讓vscode的eslint插件忽略哪些文件不要進(jìn)行eslint檢查

eslint回顧總結(jié)

babel的用法

devSever入門配置

開發(fā)環(huán)境總結(jié)

怎么啟動webpack指定的配置文件

性能優(yōu)化開始了(webpack高級)

css抽取的目的（生產(chǎn)環(huán)境優(yōu)化）

1.提高資源并行加載能力，提升性能

2.防止被插入html中，網(wǎng)速慢的時候出現(xiàn)閃屏現(xiàn)象

css兼容處理

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

開發(fā)模式vs生產(chǎn)模式小結(jié)

SourceMap（開發(fā)環(huán)境優(yōu)化）

為什么

更快更有效的找到源代碼錯誤位置

是什么

xxx.map,構(gòu)建后代碼與源代碼的映射關(guān)系，

構(gòu)建后代碼出錯，通過xxx.map找到源代碼的位置，更快鎖定錯誤

配置

cheap-module-source-map vs source-map

不同點(diǎn)：cheap只有行信息，沒有列信息

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

提升打包構(gòu)建速度（開發(fā)環(huán)境優(yōu)化）

hmr,局部刷新修改的頁面，不然修改局部會重新構(gòu)建整個bundle

webpack5默認(rèn)開啟HMR. hot:true

注意js不會受hmr影響，需要加點(diǎn)配置的代碼。

OneOf，（開發(fā)和生產(chǎn)都適用）

為什么：每個loader都執(zhí)行，效率低

是什么：命中了loader就不往下執(zhí)行了

Include/Exclude（開發(fā)和生產(chǎn)都適用）

為什么：第三方庫已經(jīng)編譯過，不要編譯排除掉

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

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

配置

Cache(開發(fā)環(huán)境和生產(chǎn)環(huán)境)

為什么？

每次打包js都要經(jīng)過Eslint和Babel編譯，速度較慢

通過緩存Eslint和Babel的編譯結(jié)果，是第二次打包的速度更快

是什么？

Eslint和Babel的編譯結(jié)果緩存

使用