webpack之常用的loader
巫英纵
开发中常用的webpack配置-----loader,在此总结一下各种loader的作用,方便以后使用.
loader本质上就是一个函数,在该函数中对接收的内容进行转换,loader起到的作用就是一个翻译官的作用,在module.rules中配置,作为模块的解析规则,类型是数组,每一项都是一个object
raw-loader:
主要用于静态资源内联
文档:https://www.webpackjs.com/loaders/raw-loader/
file-loader:
将一个文件移动到一个文件夹中
文档:https://www.webpackjs.com/loaders/file-loader/
url-loader:
与file-loader类似,区别是在使用url-loader的时候,可以设置一个阀值,当大于阀值的时候就返回它的
文档:https://www.webpackjs.com/loaders/url-loader/
publicPath:
否则返回内联的base64url,这样可以减少小文件的http请求数
文档:http://doc.codingdict.com/webpack-cn-doc/guides/public-path/
source-map-loader:
当使用webpack打包的时候,如果源代码有错误,我们只能知道打包后的代码第一行出错,如果加上该loader它会就做
原代码和目标代码的映射,然后可以快速定位错误代码的位置
文档:https://www.webpackjs.com/loaders/source-map-loader/
svg-inline-loader:
将压缩后的svg内容注入到代码中
文档:https://webpack.html.cn/loaders/svg-inline-loader.html
img-loader:
加载和压缩图片文件
文档:https://www.npmjs.com/package/img-loader
json-loader:
加载json文件
文档:https://www.webpackjs.com/loaders/json-loader/
babel-loader:
将ES6转为ES5
文档:https://www.webpackjs.com/loaders/babel-loader/
ts-loader:
将typescript转为javascript
文档:http://doc.codingdict.com/webpack-cn-doc/guides/typescript/
awesome-typescript-loader:
将typescript转化为javascript,并且性能优于ts-loader
文档:https://www.npmjs.com/package/awesome-typescript-loader
sass-loader:
将scss/sass代码转化为css
文档:https://www.webpackjs.com/loaders/sass-loader/
style-loader:
把css代码注入到javascript中,通过操作dom操作去加载css
文档:https://www.webpackjs.com/loaders/style-loader/
postcss-loader:
把css解析成javascript可以操作的AST(抽象语法树结构)和调用一些插件来处理AST并得到结果
文档:https://www.webpackjs.com/loaders/postcss-loader/
eslint-loader:
检查javascript代码的规范化
文档:https://www.npmjs.com/package/eslint-loader
tslint-loader:
检查typescript代码的规范化
文档:https://www.npmjs.com/package/tslint-loader
mocha-loader:
加载mocha测试用例
文档:https://www.npmjs.com/package/mocha-loader
converjs-loader:
计算测试的覆盖率
文档:https://www.webpackjs.com/loaders/coverjs-loader/
vue-loader:
加载.vue代码
文档:https://vue-loader.vuejs.org/
i18n-loader:
国际化
文档:https://www.webpackjs.com/loaders/i18n-loader/
cache-loader:
放在性能开销比较大的loader的前面,可以将结果存在磁盘中,减少编译时间
文档:https://www.webpackjs.com/loaders/cache-loader/
类似资料：