webpack 圖片、字體、多媒體等資源的處理

webpack 圖片、字體、多媒體等資源的處理

webpack 搭建文檔： https://webpack.eleven.net.cn

1. css 或 js 中引入的圖片、字體、多媒體等靜態資源，統一使用 url-loader 處理。

   配置了 url-loader 之後，webpack 編譯時能夠自動將小文件轉成 base64 編碼，減小網絡請求。若是不須要將小文件轉成 base64 ，也能夠用 file-loader 替換 url-loader。

   1. 安裝依賴包

      url-loader 內部會自動調用 file-loader，因此仍然須要安裝。

      yarn add url-loader file-loader -D

   2. 添加配置

      // 處理圖片(file-loader來處理也能夠，url-loader更適合圖片)
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/assets/images/[name].[hash:7].[ext]',
        },
      },
      // 處理多媒體文件
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/assets/media/[name].[hash:7].[ext]',
        },
      },
      // 處理字體文件
      {
          test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
          loader: 'url-loader',
          options: {
              limit: 10000,
              name: 'static/assets/fonts/[name].[hash:7].[ext]'
          }
      },

   3. js中使用到靜態資源，須要經過 import、require 導入再使用，纔會被處理。

      import img from 'xxx/xxx/123.jpg' 或 let img = require('xxx/xxx/123.jpg')

2. 對於直接在 html 頁面中經過標籤引入的圖片或其它靜態資源，即便配置了 url-loader，webpack也不會去處理它們，能夠使用 html-loader 處理。

   1. 安裝依賴包

      yarn add html-loader -D

   2. 添加配置

      // html中引用的靜態資源在這裏處理,默認配置參數attrs=img:src,處理圖片的src引用的資源.
      {
          test: /\.html$/,
          loader: 'html-loader',
          options: {
              // 除了img的src,還能夠繼續配置處理更多html引入的資源(不能在頁面直接寫路徑,又須要webpack處理怎麼辦?先require再js寫入).
              attrs: ['img:src', 'img:data-src', 'audio:src'],
              minimize: false,
              removeComments: true,
              collapseWhitespace: false
          }
      }

3. 靜態資源的訪問路徑問題

   通過上面的處理，靜態資源處理基本沒有問題了，webpack 編譯時將會將文件打包到你指定的生成目錄，可是不一樣位置的路徑url會是一個問題。所有經過絕對路徑訪問便可，在 output 下的 publicPath 填上適當的 server 端頭，來保證全部靜態資源文件能被訪問到，具體要根據服務器部署的目錄結構來作修改。

   output: {
    path: path.resolve(__dirname, 'dist'), // 輸出目錄的配置，模板、樣式、腳本、圖片等資源的路徑配置都相對於它
    publicPath: '/', // 模板、樣式、腳本、圖片等資源對應的server上的路徑
   }