loader ​

介绍 ​

webpack 只能直接处理 javascript 格式的代码。任何非 js 文件都必须被预先处理转换为 js 代码，才可以参与打包。loader（加载器）就是这样一个代码转换器。它由 webpack 的 loader runner 执行调用，接收原始资源数据作为参数（当多个加载器联合使用时，上一个 loader 的结果会传入下一个 loader），最终输出 javascript 代码（和可选的 source map）给 webpack 做进一步编译。

常用的 loader ​

框架 ​

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

样式 ​

• style-loader：将模块导出的样式以 link 形式添加到 html 文件中
• css-loader：加载 CSS 文件、解析 import 的 CSS 文件，合并后返回 CSS 代码
• postcss-loader：使用 Postcss 加载并转换 css 文件
• sass-loader：加载并编译 sass/scss 文件
• less-loader
• stylus-loader

JS ​

• bable-loader：将 ES6+ 代码转为 ES5 代码
• esbuild-loader：将 ES5 代码转为 ES6+ 代码
• ts-loader：将 TS 代码转为 JS 代码

模板 ​

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

文件 ​

• file-loader：处理图片与字体文件，文件将以相对路径引用
• url-loader：同处理图片与字体文件，可设置阈值，大于阈值则交给 file-loader 处理，小于阈值则将文件处理为 base64 形式使用
• image-loader：加载并压缩图片文件
• json-loader：加载 json 文件（默认包含）

loader 的实现 ​