webpack4.x最佳实践-4.常用loader

在初始配置下webpack只能处理js模块，但是我们开发过程中会引入很多js之外的模块，要想正确的打包，我需需要引入响应的loader进行处理

打包js模块

打包js模块时要顾及到浏览器的兼容性，es6或更高版本的语法有些浏览器可能会不兼容，我们需要引入bable把高级语法翻译为浏览器能解释的语法，比如数组的map方法、flatmap方法、import引入模块等。

涉及到三个基本的npm包：npm install -D babel-loader @babel/core @babel/preset-env

// index.js

var root = document.getElementById('root')

var btn = document.createElement("button")
btn.innerHTML = '点我啊'
root.appendChild(btn)

btn.onclick = function onBtnClick(params) {
  const arr = ['a', 'b', 'c', 'd']
  let _copy = []
  new Promise(() => {
    _copy = Array.from(arr)
    let str=''
    _copy.map(item=>{
      str+=item
    })
    console.log(str);
  })
  console.log(_copy)
}

    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,// 第三方包已经转换过了，不必在此转换
        use:  'babel-loader'
      }
    ]

打包图片资源

我们在开发过程中会引入不同类型，不同大小的的图片资源，合理的进行图片资源打包也能有益于加快页面加载速度。一般情况下，图片资源的利用会有两种：实体图片和base64格式。前者独立于js、html、css需要单独请求然后加载，弊端在于多发了http请求，后者是以base64格式的字符串嵌入在代码中，不会单独发送请求，但是被嵌入的文件臃肿，不利于阅读和维护。webpack提供了两个loader来实现图片打包：file-loader和url-loader，前者直接拷贝图片到打包路径，后者讲图片处理为base64格式的，一般依据图片的大小来判断引用哪个loader，好在url-loader对于不符合大小限制的图片会自动将其直接拷贝。

在打包前需要安装file-loader和url-loader

下面示例实现了在页面上插入两个img标签，一个图片大小为312k，一个为7.6k

import img312k from 'static/imgs/312k.png'
import img7k from 'static/imgs/7.6k.png'
import './index.less'
import 'static/font/iconfont.css'


var root=document.getElementById('root')

var img312=new Image()
img312.src=img312k
img312.classList.add('img312')
root.appendChild(img312)


var img7=new Image()
img7.src=img7k
img7.classList.add('img7')
root.appendChild(img7)

  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|bmp|ico)$/i,
        include: [
          path.resolve(__dirname, '../static/imgs')
        ],
        use: {
          loader: 'url-loader',
          options: {
            limit: 20480,//20k
            name: '[name][hash].[ext]',
            outputPath: 'static/imgs'//大于20K的拷贝至打包结果下的static/imgs路径下
          }
        },
      },
    ]
  }
      

打包结果：

效果：

打包样式资源

处理样式资源需要多个loader，下面以less样式为例来分析多个loader加载的过程。webpack打包样式的过程最少有三个步骤：1，将less语法翻译为css语法；2，将css语法的样式处理成浏览器能理解的形式；3，将style引入到页面。对应的loader为less-loader、css-loader、style-loader，另外还需要安装less来处理less文件，当需要兼容浏览器时，还需要postcss-loader来加浏览器前缀。

下面还是以加载两个图片为例，给body、两图片都设置样式

// index.less
@import url("img.less");

body {
  background-color:lightgray
}


// img.less
#root{
  .img312{
    width: 400px;
    height: 150px;
  }
  .img7{
    width: 150px;
    height: 200px;
    transform:rotate(0.5turn);
  }
}

import img312k from 'static/imgs/312k.png'
import img7k from 'static/imgs/7.6k.png'
import './index.less'

......

webpack中loader配置

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

效果：

打包字体资源

有时为了加快页面加载速度，会将一些图片资源替换为字体图标，以iconfont为例，字体图标涉及的文件格式有svg、eot、ttf、woff、woff2。实现字体图标的加载的基本思路是利用file-loader将资源复制到打包目录下，

import 'static/font/iconfont.css'

var node=document.createElement('p')
node.innerHTML='font'
node.classList.add('iconfont')
node.classList.add('iconchangjingguanli')
root.appendChild(node)

  rules: [
      {
        test: /\.(eot|ttf|woff|svg|js)$/i,
        include: [
          path.resolve(__dirname, '../static/font') //src目录下可能有svg资源，在此特别设置inclule为了只打包与字体图标相关的svg资源
        ],
        use: {
          loader: 'file-loader',
          options: {
            name: '[name][hash].[ext]',
            outputPath: 'static/fonts',// 输出到打包目录下的static/fonts路径，保持资源间的相对位置不变，也便于管理
          }
        },
      },
    ]

代码结构：

效果：