loader的作用
用来将webpack无法处理的东西。转换成webpack可以处理的东西，webpack理论上只可以处理js的语言。
-
test:loader用来处理哪些文件，这个部分一般使用正则来表示 -
use：将满足的条件进行转换的时候，使用的是哪个loader
module: {
rules: [
{
test: /\.(jpg|png)$/, // 用正则标识对哪些文件进行处理
use: {
loader: 'file-loader', // 对于满足正则的文件使用什么loader，这个loader需要通过npm 进行安装
options: {
// placeholder 占位符
name: '[name].[ext]', // 以相同的文件名和后缀进行打包
outputPath: 'images/'
}
}
},
{
test: /\.scss$/, // 用正则标识对哪些文件进行处理,正则对满足.scss结尾的文件执行下面的loader
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2
}
},
'sass-loader',
'postcss-loader'
] // loader 的执行顺序是从下到上，从右到左
}
]
},
那么对于打包来说，究竟是什么样的流程呢？
-
npm run bundle// 或是npx webpack 执行这一命令 - 找到
webpack.config.js配置项，根据配置项来进行打包，如果没有这个文件，会执行默认的参数进行打包 - 在打包的过程中，遇到
js文件会直接进行打包，但是遇到其他类型的文件，如jpg文件，会查询配置文件，然后根据配置文件的参数，使用固定的loader进行打包 - 如遇到
jpg，就会使用file-loader进行打包
那么file-loader究竟做什么了？
- 发现了引入了图片
- 将图移动到指定的目录下
- 移动后，获取到新的文件的名字
- 将名称返回给引入模块的变量之中
其实url-loader和file-loader功能很相似，就是多了一个limit参数，我们可以设置这个参数，来决定什么时候用url-loader
样式的打包
流程：
- 引入了一个
css文件 - 需要先要安装
css-loader和style-loader - 遇到
css文件就会去使用css-loader和style-loader进行打包 - 把样式文档放在指定的文件中
css-loader：分析几个css文件之间的关系，并将几个css文件合并成一个css文件中
style-loader：将css-loader合并的css文件挂载在指定文件的header上面
我们如果配饰了sass-loader或是less-loader的话，我们一般需要配置importLoaders：2,因为执行顺序是从下到上，从右到左，所以一点引入的less文件里面再次引入less文件会导致，打包可能不在走之前的sass-loader, postcss-loader,我们配置importLoaders：2就是为了规避这个问题
