webpack03------配置常用的loader

Loader是什么

Loader其实是打包的方案，webpack不识别除了js之外的模块，Loader可以针对不同的模块做对应的处理让webpack能打包各种各样的模块。

---

处理纯css文件

编译 .css 文件，需要用到 css-loader 和 style-loader

css-loader 使你能够使用类似 @import 和 url(...) 的方法实现 require() 的功能；

style-loader 将所有的计算后的样式加入页面中； 二者组合在一起使你能够把样式表嵌入 webpack 打包后的JS文件中。

依赖：

npm install css-loader style-loader -D

配置：

module:{
    rules:[
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }
    ]
},

loader的执行顺序是从下到上，从右到左的，通过css-loader解析css语法，然后style-loader来放到style标签下。

---

处理scss文件

依赖：

npm install css-loader style-loader sass-loader node-sass -D

配置：

module:{
    rules:[
        {
        test:/\.scss$/,
        use:['style-loader','css-loader','sass-loader']
      }
    ]
},

处理css文件需要配置的loader：

• style-loader
• css-loader

处理scss需要的额外loader:

• sass-loader node-sass

loader的执行顺序是从下到上，从右到左的，先去用sass-loader来处理scss语法，然后通过css-loader解析css语法，然后style-loader来放到style标签下。

---

通过postcss对样式进一步的处理

对于 CSS3 的许多特性来说，需要添加各种浏览器兼容前缀，开发过程中，这样加太麻烦，postcss 帮你自动添加各种浏览器前缀。

 {
   test:/\.scss$/,
   use:['style-loader','css-loader','sass-loader','postcss-loader']
 }

依赖：

npm i postcss-loader -D

postcss需要在根目录下配置一个新文件postcss.config.js

module.exports = {
  plugins:[
    require('autoprefixer')
  ]
}

autoprefixer是对需要兼容的css加上兼容性的前缀（transform）。

package.json需要配置浏览器要求 才会有兼容性效果

"browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]

---

配置图片、文件、图标文字

file-loader

指示webpack将所需对象作为文件发出并返回其公共URL，简单的说就是让webpack识别jpg,png,gif等文件类型的格式。

module:{
    rules:[
      {
        test:/\.(jpg|png|gif)$/,
        use:{
          loader:'file-loader',
          options:{
            // placeholder 占位符 打包后的文件名称 还是跟之前的一样 扩展名也是一样
            name:'[name].[ext]',
            outputPath:'images/'
          }
        },
        url-loader版本
        use:{
          loader:'url-loader',
          options:{
            // placeholder 占位符 打包后的文件名称 还是跟之前的一样 扩展名也是一样
            name:'[name].[ext]',
            outputPath:'images/'，
            limit:10240
          }
        }
      }
    ]
  }

url-loader

跟filer-loader很类似，区别在于url-loader多了一个限制limit，如果不是设置的话，所有文件类型的资源都会以base64的形式打包到js文件中，文件过大的话js加载的会很慢。limit限制后 小于这个限制的会以base64的形式打包，大于的会以图片的形式（跟file-loader一样）打包出来。

eot|ttf|svg 字体打包

{
   test:/\.(eot|ttf|svg)$/,
   use:{
     loader:'file-loader'
   }     
}