【原】webpack--loaders,主要解释为什么需要loaders和注意事项
Why需要loaders?
webpack开箱即用只支持JS和JSON两种文件类型,但是比如css、less,还有目前市场上比较新的语法糖jsx,怎么处理呢?
通过Loaders去支持其他文件类型并且把它们转化为有效的模块,并且可以添加到依赖图中。
本身是一个函数,也就是接受源文件作为参数,返回转换的结果。
常见的loaders有哪些呢?
babel-loader : 转换es6、es7等js新特性语法
css-loader : 支持.css文件的加载和解析,转换成commonjs对象
style-loader : 将样式通过<style>标签插入到head中
less-loader : 将less文件转换成css
ts-loader : 将typescript文件转换为js
file-loader : 进行图文、文字等的打包
raw-loader : 将文件已字符串的形式导入
thread-loader : 多进程打包js和css
注意事项:webpack.config.js文件中配置module时,引入css-loader和style-loader的顺序,先写style-loader,
原因是:loader的调用是链式调用,它的执行顺序是从右到左的。
如有理解不对,请各位大神纠正