webpack之解析圖片，字體

我先簡單介紹下這兩個loader:

file-loader  用於處理文件

url-loader也可以處理圖片和字體，可以設置較小資源自動base64，減少http請求

下面我以file-loader爲例介紹webpack解析圖片字體：

1.安裝：cnpm i file-loader -D

2.在src下引入圖片，並新建index.js

import logo from './1574926505.jpg'
let imgNode=new Image();
imgNode.setAttribute('src',logo);

document.body.appendChild(imgNode);

3..webpack.config.js中配置

"use strict";

const path=require('path');

module.exports={
    entry:'./src/index.js',
    output:{
        path:path.join(__dirname,'dist'),
        filename:'bundle.js'
    },
    mode:'production',
    module:{
        rules:[
            {
                test:/\.(png|jpg|svg|gif)$/,
                use:'file-loader'
            }
        ]
    }
}

4.npm run build打包

Tips:

字體和圖片操作流程一樣，這裏就不多做介紹，只需修改一下匹配規則

webpack 目前的打包入口只能是以 js 爲入口的，暫時還不支持以 html 爲入口進行打包，也就是 webpack 默認是不會分析 html 文件裏面的依賴(比如 src=xxx 或者 外部 css 中的語法)。可以看下這個 issue 的討論：（https://github.com/webpack/webpack/issues/536）

在html裏用img的src引用圖片。
解決辦法：可以增加 html-loader 去處理 html，這樣的話可以識別的了 img:src 這個屬性。html-loader 提供瞭解析 html 裏面的圖片引入的能力