loader
loader是干什么用的呢？实际上，webpack在打包过程中，只能认识js和json文件，如遇到css和图片等类型的文件，他并不能识别，无法进行继续打包，会抛出错误。loader的作用就是让webpack去处理一些除了js和json文件类型以外的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中
在 webpack 的配置中，loader 有两个属性：
test 属性，识别出哪些文件会被转换。 use 属性，定义出在进行转换时，应该使用哪个 loader。
我们来看一个简单的loader使用例子：
npm install raw-loader -D
module.exports = {
entry: 'src/index.js',
output: {
filename: 'bundle.js',
path: './dist'
},
module: {
rules: [
{
test: /\.txt$/,
use: 'raw-loader'
}
],
},
};
loader的使用我们放在module属性下的rules中，module顾名思义就是模块的意思，这里我们处理的都是模块的内容，rules就是规则，他是一个数组，配置不同规则，可以处理不同的文件类型。
loader处理样式
假如我们现在有以下逻辑代码：
import './index.css';
let root = document.getElementById('root');
root.classList.add('demo')；
现在我们要对上面这个js文件进行打包，很显然，打包的时候会报错，因为webpack打包的时候遇到css文件类型，他无法识别，我们也没告诉他，如果遇到css文件类型，应该如何处理，所以，我们在webpack.config.js中进行配置：
npm install css-loader style-loader -D
module.exports = {
entry: 'src/index.js',
output: {
filename: 'bundle.js',
path: './dist'
},
module: {
rules: [
{
test: /\.txt$/,
use: 'raw-loader'
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
],
},
};
进行了以上的配置之后，再进行打包，我们就会发现，打包成功了，我们经过配置，就是告诉了webpack，在打包的时候，如果遇到 .css 结尾的文件，就使用 style-loader ， css-loader 这两个loader进行处理，那这两者在使用的时候有没有顺序呢，答案是：有的，webpack在处理的时候，是按照我们在use中配置的数组项中从下到上或者从右到左进行挨个处理的，这里，也就是先用css-loader处理，处理完后，再用style-loader处理。
那么还有一个问题，为什么我们要使用style-loader呢？其实style-loader的作用是把css-loader处理好的css样式挂载到html文档中的head元素中的<style></style>元素中，这样，html的样式才能生效
再来看下面这个css文件：
// index.css
@import './sub.css'
// sub.css
.demo{
background-color: #eee;
}
我们在index.css文件中又使用import引入了另一个css文件，然后进行打包，浏览器打开html文件，样式上面没有问题，然后我们做如下的配置：
module.exports = {
entry: 'src/index.js',
output: {
filename: 'bundle.js',
path: './dist'
},
module: {
rules: [
{
test: /\.txt$/,
use: 'raw-loader'
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
import: false
}
}
]
}
],
},
};
继续打包，浏览器打开html文件，发现，我们需要的样式不生效了。这里，我们可以发现，loader还可以通过options属性来配置我们需要的各项能力，这里的import属性，就是来启用/禁用 @import 解析的，我们设置成了false，css文件中的@import就无法解析了
我们实际开发中也会用scss或者less文件来处理样式，那么scss文件我们改如何配置呢，下面也是一个简单处理scss文件的配置：
npm install sass-loader node-sass -D
我们需要使用上面两个包
module.exports = {
entry: 'src/index.js',
output: {
filename: 'bundle.js',
path: './dist'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
import: false
}
}
]
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
]
}
],
},
};
同样的，在use中的使用顺序是，先使用sass-loader将scss文件处理成css文件，再用css-loader处理css文件，最后使用style-loader将css文件内容挂到style元素中去
接下来我们再介绍一个postcss-loader：
npm install --save-dev postcss-loader postcss
按照官方推荐，我们可以在与webpack.config.js同级目录下，新建一个postcss.config.js文件，这里我们也顺带介绍一下autoprefixer这个插件，可以先npm install autoprefixer -D来安装一下这个插件，然后我们在postcss.config.js中使用这个插件:
// postcss.config.js
module.export = {
plugins: [
require('autoprefixer')
]
}
module.exports = {
entry: 'src/index.js',
output: {
filename: 'bundle.js',
path: './dist'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
import: false
}
}
]
},
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2
}
}
'sass-loader',
'postcss-loader'
]
}
],
},
};
PostCSS 可以处理 CSS 的 loader，怎么处理呢？我们通过使用autoprefixer这个插件来举例，这个插件可以帮助我们在css属性前面自动加上-webkit-等浏览器属性。
loader处理图片文件
处理图片文件，我们需要使用file-loader
module.exports = {
entry: 'src/index.js',
output: {
filename: 'bundle.js',
path: './dist'
},
module: {
rules: [
{
test: /\.(jpe?g|png|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: [name].[ext] // [hash]
}
}
]
}
],
},
};
还有一个url-loader也可以处理图片文件
module.exports = {
entry: 'src/index.js',
output: {
filename: 'bundle.js',
path: './dist'
},
module: {
rules: [
{
test: /\.(jpe?g|png|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 20800
}
}
]
}
],
},
};
url-loader和file-loader的区别是什么呢？file-loader是直接将原图片打包至output的文件目录中，而url-loader则是直接将图片转化成base64直接放入在js文件中，但我们可以通过limit来配置，图片大小小于我们配置的limit，则会转化成base64，否则还是以图片打包到output的文件目录
好了，这里我们就是简单介绍了loader的作用，大概知道了loader能干什么，至于更具体的每一个loader的使用方法和配置项，还是需要参考官方的文档，那里会更细更具体，在使用webpack过程中按需去查找即可
