webpack系列(3)--loader使用

loader

什么是loader

是一个打包方案，告诉webpack某个类型的文件该如何打包

语法

在配置文件中，添加:

...省略代码
module:{
  rules:[
    { ...loader使用 }
  ]
}

打包图片

file-loader

• 安装 npm i file-loader -D

在入口文件中添加：

import _jpg from './1.jpg'
window.onload = function(){
  const img = document.createElement('img')
  img.src = _jpg
  document.body.appendChild(img)
}

1. 默认配置打包

 {test:/\.(jpg|png|git)$/,use:'file-loader'}

1. 指定图片名称

  {
    test:/\.(jpg|png|gif)$/i,
    use:[{
      loader:'file-loader',
      options:{
        name:'[name].[hash].[ext]'
      }
    }]
  }

1. 指定图片的输出路径

  {
    test:/\.(jpg|png|gif)$/i,
    use:[{
      loader:'file-loader',
      options:{
        name:'[name].[hash:10].[ext]',  // [hash:10]10位hash
        outputPath:'imgs/'
      }
    }]
  }

url-loader

• 安装npm i url-loader -D

需要注意的是，url-loader需要配合file-loader使用，所以两个loader都需要安装

• 对图片使用url-loader

{
    test:/\.(jpg|png|gif)$/,
    use:{
        loader:'url-loader',
        options:{
            name:'[name].[hash:10].[ext]',
            outputPath:'imgs/',
        }
    }
}

在执行完打包命令后，我们发现，并没有将该图片打包到我们指定的文件夹中，但是页面上确可以正确的显示，这是为什么呢？

通过查看图片的src地址，发现，显示的并不是路径，而是base64，因为url-loader会默认将文件转换为base64编码，以减少http请求的次数，但是这么使用不对；因为如果文件很大，那么转换出来的base64编码也会很大，这个编码是在编译后的js入口文件中，所以会造成js文件体积增大，页面空白时间增多，所以，我们需要按需配置，将一定大小的文件转换为base64。

• 按需配置文件大小

options:{
    name:'[name].[hash:10].[ext]',
    outputPath:'imgs/',
    limit:1024*4
}

以上配置的含义是：文件大于4kb的，均打包的指定的文件夹下，小于4kb的，直接转化为base64。

处理css

• 安装style-loader和css-loader

  npm i style-loader css-loader -D

• 添加loader处理，继续在module的rules中

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

因为打包css文件，需要使用两个loader，所以在use中，不能使用对象的形式，而是数组

另外，需要注意的是，style-loader和css-loader的书写顺序问题，不能乱写

• 关于style-loader和css-loader

  • css-loader帮助我们分析css各个文件之间的关系，并将它们合并成一个
  • style-loader将合并好的css文件挂载到页面的head部分

处理less

• 安装lesss-loader和less

npm i less-loader less  -D

• 配置loader

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

添加css私有前缀

• 安装postcss-loader和autoprefixer

npm i postcss-loader  autoprefixer -D

• 修改less的配置

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

• 添加postcss.config.js

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

我们打包后发现，并没有起作用，其实是因为部分css样式，在新版的浏览器中已经取消了前缀，使用npx autoprefixer --info可查看哪些属性需要使用前缀。

• 创建.browserslistrc文件，添加如下内容:

last 3 version
>0.2%

重新打包即可看到效果。

打包其他文件

webpack对于文件的处理，其实就是把文件从一个地方，复制一份移动到另外的地方

以字体文件为例：

• 添加file-loader即可：

{
  test:/\.(eot|svg|ttf|woff|woff2)$/i,
  loader:'file-loader',
  options:{
  name:'[hash:10].[ext]',
  outputPath:'fonts'
  }
}

或者

{
  test:/\.(eot|svg|ttf|woff|woff2)$/i,
  use:[{
    loader:'file-loader',
    options:{
      name:'[hash:10].[ext]',
      outputPath:'fonts'
    }
  }],
}