Webpack 支持使用 loader 对文件进行预处理。你可以构建包括 JavaScript 在内的任何静态资源。并且可以使用 Node.js 轻松编写自己的 loader。
在 require()
语句中使用 loadername!
作为前缀的方式来使用 loader,或者在 webpack 配置中配置 regex 来自动应用它们 - 请参阅 配置 。
val-loader
将代码作为模块执行,并将其导出为 JS 代码ref-loader
用于手动建立文件之间的依赖关系cson-loader
加载并转换 CSON 文件babel-loader
使用 Babel 加载 ES2015+ 代码并将其转换为 ES5esbuild-loader
加载 ES2015+ 代码并使用 esbuild 转译到 ES6+buble-loader
使用 Bublé 加载 ES2015+ 代码并将其转换为 ES5traceur-loader
使用 Traceur 加载 ES2015+ 代码并将其转换为 ES5ts-loader
像加载 JavaScript 一样加载 TypeScript 2.0+coffee-loader
像加载 JavaScript 一样加载 CoffeeScriptfengari-loader
使用 fengari 加载 Lua 代码elm-webpack-loader
像加载 JavaScript 一样加载 Elmhtml-loader
将 HTML 导出为字符串,需要传入静态资源的引用路径pug-loader
加载 Pug 和 Jade 模板并返回一个函数markdown-loader
将 Markdown 编译为 HTMLreact-markdown-loader
使用 markdown-parse 解析器将 Markdown 编译为 React 组件posthtml-loader
使用 PostHTML 加载并转换 HTML 文件handlebars-loader
将 Handlebars 文件编译为 HTMLmarkup-inline-loader
将 SVG/MathML 文件内嵌到 HTML 中。在将图标字体或 CSS 动画应用于 SVG 时,此功能非常实用。twig-loader
编译 Twig 模板并返回一个函数remark-loader
通过 remark
加载 markdown,且支持解析内容中的图片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 组件angular2-template-loader
加载并编译 Angular 组件有关更多第三方 loader,请参阅 awesome-webpack 中的列表。
Webpack 5 现已正式发布。请阅读我们的 发布公告。如还未准备升级,请阅读 webpack 4 文档。