loader是webpack中一个非常核心的概念。
webpack用来做什么呢？
1.在之前我写的一些代码中，主要是用来处理我写的js代码，并且webpack也会自动处理js之间的依赖关系。
2.但是，我们不仅仅有基本的js代码处理，我们也需要加载css、图片、也包括一些高级的将ES6转成ES5代码，将typescript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js 文件等等。
3.对于webpack本身的能力来说，对于这些转化是不支持的。
4.那怎么办呢？给webpack扩展对应的loader就可以啦。

loader使用过程：
步骤一：通过npm安装需要使用的loader
步骤二：在webpack.config.js中的modules关键字下进行配置
大部分loader我们都可以在官网中找到，并且学习对应得用法。

项目开发过程中，我们必然需要添加很多的样式，而样式我们往往写到一个单独的文件中。
1.在src目录中，创建一个css文件，其中创建一个normal.css文件。
2.我们也可以重新组织文件的目录结构，将零散的js文件放在一个js 文件夹中。

normal.css中的代码非常简单，就是将body设置为red

但是，这个时候normal.css中的样式会生效吗？
1.当然不会，因为还没有引用它。
2.webpack也不可能找到他，因为只有一个入口，webpack会从入口开始查找其他依赖的文件。

使用多个loader时，是从右向左

//3.依赖css文件
require('./css/normal.css')

const path=require('path')

module.exports={
  entry:'./src/main.js',
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  },
  module:{
    rules: [
      {
        test: /\.css$/,
        //css-loader只负责将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader时，是从右向左
        use: ['style-loader','css-loader']
      }
    ]
  }
}

如果我们在项目中使用less、scss、stylus来写样式，webpack是否可以帮助我们处理呢？
以less为例，其他也是一样，先创建一个less文件，依然放在css文件夹中

首先，我们在项目中加入两张图片：
一张较小的图片（小于8kb）,一张较大的图片（大于8kb）
因为limit的值时8kb=8196
图片处理，使用URL-loader来处理，依然先安装url-loader
再修改webpack.config.js配置文件
最后再次打包，就可以运行了
limit属性的作用，当图片小于8kb时，对图片进行base64编码。

如果背景图片大于8kb，就要通过file-loader进行处理，
首先我们需要安装file-loader(如何安装可以查看webpack中文手册)
再次打包，我们就会发现dist文件夹下多了一个图片文件

发现webpack自动生成一个非常长的图片文件的名字
1.这是一个32位的hash值，目的是防止名字重复
2.但是，真实开发者，我们可能对打包的图片名字有一定的要求
3.比如：将所有图片放在一个文件夹中，跟上图片原来的名字，同时也要防止重复
所以，我们可以在options中添加如下选项
img:文件要打包的文件夹，
name:获取图片原来的名字，放在该位置
hash:8 :为了防止图片名称冲突，依然使用hash，但是我们只保留八位
ext:使用图片原来的扩展名
name:'img/[name].[hash:8].[ext]'

但是发现图片病没有显示出来，这是因为图片使用的路径不正确
1.默认情况下，webpack会将生成的路径直接返回给使用者
2.但是，整个程序是打包在dist文件夹下的，所以需要在路径下再添加一个dist/
publicPath:‘dist/’

	const path=require('path')

module.exports={
  entry:'./src/main.js',
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js',
    publicPath:'dist/'
  },
  module:{
    rules: [
      {
        test: /\.css$/,
        //css-loader只负责将CSS文件进行加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader时，是从右向左
        use: ['style-loader','css-loader']
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片小于limit时，会将图片编译成base64字符串形式
              //当加载的图片大于limit时，需要使用file-loader模块进行加载
              limit: 8196,
              name:'img/[name].[hash:8].[ext]'
            },

          }
        ]
      }

      ]
   }
}