webpack學習-處理less,圖片,字體

如下是學習筆記:

1.下載相關處理包,並在config配置文件中配置loader項

2.前文中寫過處理css文件的步驟爲

// 使用步驟:
// 1 安裝:  npm i -D style-loader css-loader
// 2 在 webpack.config.js 中的 module 裏面配置loader處理規則 { test: /\.css$/, use: ['style-loader', 'css-loader'] }

3.處理less文件

// 步驟：
// 1 安裝包： npm i -D less-loader less
//           npm i -D style-loader css-loader
// 2 在 webpack.config.js 的 module 中添加一個規則
//{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },這裏less-loader會自動去調用less模塊處理less語法

4.處理圖片(file-loader和url-loader)

4.1使用file-loader

// 1 安裝： npm i -D file-loader
// 2 在 webpack.config.js 中的 module 裏面添加一個rules
//{ test: /\.(jpg|jpeg|png|gif)$/,use: 'file-loader'}

//在 file-loader 中，會使用 md5 處理圖片文件，對於同一張不一樣名稱的圖片，只會加載一次,能夠達到減小網絡請求，加快網站的加載速度的效果

4.2使用url-loader

// 推薦使用 url-loader
// 1 安裝： npm i -D url-loader
//   最好將 file-loader 一塊兒安裝
// 2 在 webpack.config.js 中，只要將 file-loader 替換爲 url-loader 就能夠了

{
　　test: /\.(jpg|jpeg|png|gif)$/,

　　//loader: 'url-loader',若是不設置大小限制,直接這樣配置便可

　　use: [

　　　　　　{
　　　　　　　　loader: 'url-loader',
　　　　　　　　options: {
　　　　　　　　// 單位：字節， 8Kb
　　　　　　　　// 若是圖片的大小比 8kb 小，圖片就會被處理爲 base64
　　　　　　　　// 若是圖片的大小大於或等於 8kb ，url-loader會自動調用 file-loader 來對圖片重命名處理
　　　　　　　　// limit: 8192
　　　　　　　　}
　　　　　　}
　　　　　]
}

// url-loader 默認狀況下，會將圖片處理爲base64編碼的格式,直接內嵌到頁面中,使得頁面取消了一次該圖片的請求,提升了性能,但不適合大圖片
// data:image/png;base64, ....

5.處理字體

與處理圖片同樣,推薦使用url-loader(使用file-loader會被MD5處理重命名,使用url-loader則會被格式化爲base64,也能夠添加閾值)

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

6.配置文件模板

// 配置loader
  module: {
    rules: [
      // test 是一個正則, 用來匹配加載文件的路徑
      //  好比: import './css/index.css'

      // use 表示使用哪一個loader來處理這個類型的文件
      // 注意: 有順序!!!
      // 處理過程是: 從右往左

      // css-loader 讀取CSS文件,將其轉化爲一個模塊
      // style-loader 拿到css-loader讀取到的css文件內容,而後,建立一個style標籤,插入到head
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

      // 處理圖片
      // {
      //   test: /\.(jpg|jpeg|png|gif)$/,
      //   use: 'file-loader'
      // },

      {
        test: /\.(jpg|jpeg|png|gif)$/,
        // use: 'url-loader'
        use: [
          {
            loader: 'url-loader',
            options: {
              // 單位：字節， 8Kb
              // 若是圖片的大小比 8kb 小，圖片就會被處理爲 base64
              // 若是圖片的大小大於或等於 8kb ，url-loader會自動調用 file-loader 來對圖片重命名處理
              // limit: 8192
              limit: 49877
            }
          }
        ]
      },

      // 處理字體
      {
        test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
        // use: 'file-loader'
        use: 'url-loader'
      },

      // 配置babel
      {
        test: /\.js$/,
        use: 'babel-loader',
        // 排除掉不須要 babel 處理的文件路徑
        // 通常，都會將 node_modules 排除掉
        exclude: /node_modules/
      },

      // 處理Vue單文件組件
      {
        test: /\.vue$/,
        use: 'vue-loader'
      }
    ]
  }