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路徑下
          }
        },
      },
    ]
  }
      

打包結果：

效果：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-EzvFXxsc-1575288505147)(https://raw.githubusercontent.com/eralbo/imghub/master/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202019-06-10%2013.32.34img.png)]

打包樣式資源

處理樣式資源需要多個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'
        ]
      },
    ]

效果：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-r69pgy6k-1575288505151)(https://raw.githubusercontent.com/eralbo/imghub/master/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202019-06-10%2014.09.19.png)]

打包字體資源

有時爲了加快頁面加載速度，會將一些圖片資源替換爲字體圖標，以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路徑，保持資源間的相對位置不變，也便於管理
          }
        },
      },
    ]

代碼結構：

效果：