WEB 十二月 24, 2021

webpack常用loader

文章字数 4.4k 阅读约需 4 mins.

什么是loader?

对于webpack来说,默认只能打包处理JS文件,或者说JS模块,但是webpack作为模块打包工具,需要打包的模块肯定不仅仅只有JS模块,还有:图片模块,CSS模块等等;但是webpack默认是没有图片模块、CSS模块打包功能的,所以问题来了,webpack如何打包除了JS模块之外的其他模块哪?那就得用到第三方loader了,所以按照我们表面理解:loader就是帮助webpack打包那些webpack默认打包不了的模块的工具;

常用loader

加载文件

● raw-loader(https:/http://github.com/webpack-contrib/raw-loader):将文本文件的内容加载到代码中。

● file-loader(https:/http://github.com/webpack-contrib/file-loader):将webpack打包处理一系列的图片文件;比如:.png.jpg 、.jepg等格式的图片;使用file-loader打包的图片会给每张图片都生成一个随机的hash值作为图片的名字;

● url-loader(https://github. com/webpack-contrib/url-loader):和file-loader类似,但是能在文件很小的情况下以base64方式将文件的内容注入代码中。

● source-map-loader(htps:/http://github.com/webpack-contrib/source-map-loader):加载额外的 SourceMap文件,以方便断点调试。

● svg-inline-loader(https://github.com/webpack-contrib/svg-inline-loader):将压缩后的SVG内容注入代码中。

● node-loader(https://github.com/webpack-contrib/node-loader)加载Node.js原生模块的node文件。

● image-loader(https://github.com/tcoopman/image-webpack-loader):加载并且压缩图片文件

● json–loader(https://github.com/webpack-contrib/json-loader):加载JSON文件。

● yaml-loader(https://github. com/okonet/yaml-loader):加载YAML文件。

编译模版

● pug-loader(https://github.com/pugs/pug-loader):将Pug模版转换成 JavaScript函数并返回

● handlebars-loader(https:/http://github.com/pcardune/handlebars-loader):将Handlebars模版编译成函数并返回

● ejs-loader(https://github.com/okonet/ejs-loader):将EJS模版编译成函数并返回。

● haml-loader(https://github.com/alexanderpAvlenko/haml-loader)将HAML代码转换成HTML

● markdown-loader(https://github.com/peerigon/markdown-loader:将 Markdown文件转换成HTML

转换脚本语言

● babel-loader(https://github.com/babel/babel-loader):将ES6转换成ES5

● ts-loader:将TypeScript转换成JavaScript

● awesome-typescript-loader:将 Type Script转换成 JavaScript,性能要比 ts-loader好。

● coffee-loader:将CoffeeScript转换成 JavaScript

转换样式文件

● css-loader:加载CSS,支持模块化、压缩、文件导入等特性。

● style-loader:将CSS代码注入JavaScript中,通过DOM操作去加载CSS。

● sass-loader:将 SCSS/SASS代码转

换成CSS。

● postcss-loader:扩展CSS语法,使用下一代CSS。

● less-loader:将Less代码转换成CSS代码。

● stylus-loader:将Stylus代码转换成CSS代码。

检查代码

● eslint-loader:通过ESLint检查JavaScript代码

● tslint-loader:通过 TSLint检查 TypeScript代码。

● mocha-loader:加载 Mocha测试用例的代码

● coverjs-loader:计算测试的覆盖率。

6.其他 Loader

● vue-loader:加载Vue.js单文件组件。

● il8n-loader:加载多语言版本,支持国际化。

● ignore- loader:忽略部分文件。

● ui-component-loader:按需加载UI组件库。

0%