webpack loader

什么是loader

* loader是一个打包方案
* webpack默认会打包js文件，其他类型文件它不会，这个时候呢我们就要在配置文件里面去告诉它怎么打包其他类型的文件，就会用到loader，在导出的对象的module下rule中设置
* 使用的每一个loader都需要npm安装哦！

loader打包静态资源（图片）

**file-loader：**图片不会打包到js文件打好的包里，而是在外面

[name]   [ext]  等是placeholder占位符

module:{
    rule:[{
        test：/\.（jpg|png|gif）$/,   ———遇到jpg结尾
        use:{
            loader:’file-loader’,   —就用file-loader
            options:{
                name:'[name].[ext]’， ---但是默认情况打包后图片名时乱码，其实是对应hash值，就要在这里设置，name：原来的name.原来的后缀
                outputPath：’image/’   —文件打包到dist目录下image文件，没有就会创建
}
}
}]
}
	```
	
url-loader：完全可以实现file-loader的功能，和一些其他功能

url-loader打包图片会以base64的形式放到打包好的js文件中，减少http请求，可以设置
	* 
	当图片很小的时候，推荐一base64形式放到js包中
	* 
	当图片比较大的时候，推荐放到外边，哪怕需要多请求

module:{
    rule:[{
        test：/\.（jpg|png|gif）$/,   ———遇到jpg结尾
        use:{
            loader:’url-loader’,   —就用url-loader
            options:{
                name:'[name].[ext]’， ---但是默认情况打包后图片名时乱码，就要在这里设置，name：原来的name.原来的后缀
                outputPath：’image/’   —文件打包到dist目录下image文件，没有就会创建
                **limit：20480**            ———当图片小于20480b=20kb 时，就以base64打包到js文件，大于20kb就打包成图片文件
}
}
}]
}

loader打包静态资源（样式）
打包css要两个loader
.css

module:{
    rule:[{
        test：/\.css）$/,   ———遇到css结尾
        use:[’style-loader’,’css-loader']
          
}]
}

css-loader：分析出几个css文件之间关系，把几个css文件合并成一个css

style-loader：帮助我们把合成的那个css文件挂载页面style标签里面

.scss

module:{
    rule:[{
        test：/\.scss）$/,   ———遇到scss结尾
        use:[’style-loader’,’css-loader']
          
}]
}

以上是不行的，我还需要一个loader，帮我吗把sass翻译成css （ sass-loader ）npm2个包

module:{    rule:[{        test：/\.scss）$/,   ———遇到scss结尾       
 use:[’style-loader’,’css-loader’，‘sass-loader’]     
      }]}

注意loader是有执行顺序的，从下往上，从右到左！！！

自动添加css厂商前缀的loader postcss-loader
要创建文件XX（官网）
安装引入autoprefixer插件。在XX里require

//遇到的sass文件里引用了css3新属性，需要加厂商前缀
module:{
    rule:[{
        test：/\.scss）$/,   ———遇到scss结尾
        use:[    
            ’style-loader’,
            ’css-loader’，
            ‘sass-loader’，
            ‘postcss-loader’
            ]------------------------注意loader执行顺序
          
}]
}

css-loader常用配置项

module:{
    rule:[{
        test：/\.scss）$/,   ———遇到scss结尾
        use:[    
            ’style-loader’,
            {
                Loader:'css-loader’
                Options:{
                    importLoader:2  
              }
            }，
            ‘sass-loader’，
            ‘postcss-loader’
            ]------------------------注意loader执行顺序
          
}]
}

当一个sass加载css-loader时发现其中引入@import 另外一个sass时，可能子sass文件就不回去走父sass加载过的loader，importLoader：2，，就是文件import的文件也会从下往上执行loader，多走两个loader

·············································································································································
css module :模块化css，意思是一个css只在某个模块内有效，不然样式会是全局的

module:{
    rule:[{
        test：/\.scss）$/,   ———遇到scss结尾
        use:[    
            ’style-loader’,
            {
                Loader:'css-loader’
                Options:{
                    importLoader:2，
                    module:true
              }
            }，
            ‘sass-loader’，
            ‘postcss-loader’
            ]------------------------注意loader执行顺序
          
}]
}



这是js中引入样式是这样引的
import sty from ‘./XX.sass'

打包字体文件，如iconfont下载时的字体文件
打包这种文件只需要用file-loader把文件从src文件移动到dist目录下就ok啦

module:{
    rule:[{
        test：/\.（eot|ttf|svg））$/,   ———遇到字体文件
        use:{
            Loader:’file-loader'
        }
          
}]
}