什么是loader
Loader是一个模块转换器，将非JS的模块转换成JS模块，只作用在编译静态资源这一块。
loader的特性
loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
常见的loader
处理样式的loader
-
style-loader :将js中的css通过创建style标签添加到html中
-
css-loader :将css资源编译成commonjs的模块到js中
-
less-loader: 将less编译成css资源
-
sass-loader:将sass/scss编译成css资源
配置👇
处理图片,字体等静态资源的loader
webpack4:file-loader,url-loader
webpack5将这两个loader内置，直接使用asset即可
本地图片优化
配置👇
自定义输出文件名
在webpack中默认会把资源模块都打包到output中path指定的目录下
- 通过output.assetModuleFilename👇
- 通过generator.filename将某些资源发送到指定目录👇
asset会将资源转换成base64位，asset/resource不会转换而是直接输出
处理js的loader
因为webpack对js的处理是有限的，只能编译js中ES模块化语法，不能编译其他的语法，这样导致不能在IE等浏览器中运行
如打包输入的js中，ES6中的箭头函数以及...扩展运算符不能编译
因此可以通过 babel 来编译js
1.preset预设
- @babel/preset-env:一个智能预设，允许使用最新的JavaScript
- @babel/preset-react:一个用来编译React jsx语法的预设
- @babel/preset-Typescript:一个用来编译TypeScript语法的预设
配置👇
打包之后可以看到...扩展用算法编译成了arguments遍历
- Core-js
默认情况下没法处理es6+ 的语法
引入Core-js后如果浏览器不支持当前语法，就用Core-js里面的处理
- Css兼容性处理
postcss-loader postcss postcss-preset-env
配置👇
适配的浏览器需在package.json中增加
- 开启多进程提升打包速度
thread-loader
配置👇
