(1). why?
- webpack开箱只支持js和json文件类型.
- 通过loaders可以支持其它文件类型,并添加到依赖图中.
- 本身是一个函数,接受源文件作为参数,返回转换的结果.
(2). 用法:
module: {
rules: [
{
test: /\.txt$/, // test指定匹配规则
use: 'raw-loader' // use指定使用的loader名称
}
]
}(3). 常用loader:
- babel-loader:转换ES6、ES7等JS新特性语法
- ts-loader:将ts转换成js
- raw-loader:将文件以字符串的形式导入,如首屏资源想内联
- thread-loader:多进程打包js和css
2. loader:
(1). 解析css:
①. CSS加载器:
a. style-loader：将样式通过<style>标签插入到head中
b. css-loader：
(1). 支持.css文件的加载和解析
(2). 用于加载.css文件,转换成commonjs对象
c. module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'] // 调用顺序是从右到左
}
]
}
②. css加浏览器前缀:
a. postcss-loader:
(1). 若css采用@import方式引用css文件,这个引用的文件不会经过postcss-loader.
(2). 参数:
1. importLoaders可以设置所有css文件处理顺序.
2. postcss -> css-loader -> style-loader处理
③. less:
a. less-loader：将less文件转换成css
b. module: {
rules: [
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
]
}
④. scss:
sass-loader