关于 webpack loader

[suukii]

因为 webpack 只能处理 js 文件，所以对于项目中的其他资源，我们都需要指定一个或多个 loader 来处理它们。loader 本质上是一个函数，输入模块内容，返回处理后的结果，如果指定了多个 loader，那么它们都按从右往左的顺序依次执行，上一个 loader 的输出会作为下一个 loader 的输入。

常用的一些 loader

打包图片

• file-loader
  • 将图片移到 dist 目录下并重命名
  • 将文件名返回给引入模块的变量中
• url-loader
  • 将文件打包为 base64 编码，小图片(1~2k)适用，可通过 limit 配置项

打包样式

• css-loader: 能帮我们分析出几个 CSS 文件之间的关系
• style-loader: 将 css-loader 生成的文件挂载到 header 标签中
• sass-loader: 将 Sass 文件转换成 CSS 文件
• postcss-loader: 通过 postcss.config.js 进行配置，比如使用 autoprefixer 这个插件来自动添加厂商前缀

打包字体

• file-loader