常用loader

语法转换

• babel-loader 使用 Babel 加载 ES2015+ 代码并将其转换为 ES5
• ts-loader 像加载 JavaScript 一样加载 TypeScript 2.0+

模板

• html-loader 将 HTML 导出为字符串，需要传入静态资源的引用路径
• markdown-loader 将 Markdown 编译为 HTML
• handlebars-loader 将 Handlebars 文件编译为 HTML

须同时下载handlebars：npm install handlebars-loader handlebars
使用示例：

//content.handlebars
<div class="entry">
  <h1>{{title}}</h1>
    <div class="body">{{body}}</div>
</div>

//index.js
import contentTemplate from './content.handlebars';
const div = document.createElement("div");
div.innerHTML = contentTemplate({
  title:"Life",
  body:"Your are the best!"
});
document.body.appendChild(div);

handlebars文件加载后得到的是一个函数，可以接受一个变量对象并返回最终的字符串。

样式

• style-loader 将模块导出的内容作为样式并添加到 DOM 中
• css-loader 加载 CSS 文件并解析 import 的 CSS 文件，最终返回 CSS 代码
• less-loader 加载并编译 LESS 文件
• sass-loader 加载并编译 SASS/SCSS 文件
• postcss-loader 使用 PostCSS 加载并转换 CSS/SSS 文件
• stylus-loader 加载并编译 Stylus 文件

框架

• vue-loader 加载并编译 Vue 组件

文件

• val-loader 将代码作为模块执行，并将其导出为 JS 代码
• ref-loader 用于手动建立文件之间的依赖关系

资源模块

资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。
在 webpack 5 之前，通常使用：

• raw-loader 将文件导入为字符串
• url-loader 将文件作为 data URI 内联到 bundle 中
• file-loader 将文件发送到输出目录

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

• asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
• asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
• asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
• asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

当在 webpack 5 中使用旧的 assets loader（如 file-loader/url-loader/raw-loader 等）和 asset 模块时，你可能想停止当前 asset 模块的处理，并再次启动处理，这可能会导致 asset 重复，你可以通过将 asset 模块的类型设置为 ‘javascript/auto’ 来解决。