webpack4+（圖片處理、打包文件分類、打包多頁應用）

（1）圖片處理

　　首先回顧下圖片引入方式

1、js創建圖片引入
2、css結合背景圖background-image: url('')引入
3、圖片標簽引入<img src="" alt="" />

　　1、首先在js里創建圖片插入

　　

 

 

 　　接着進行打包輸出，測試如下

　　

 

 

 　　

 

 

 　　發現圖片並沒有被打包過來... ...，接下來我們在js里引入圖片

　　

 

 

 　　測試如下

　　

 

 

 　　提示我們需要一個合適的loader，這里便需要用到file-loader來轉換圖片.

>npm i file-loader -D

　　file-loader作用：

file-loader默認會生成圖片到dist輸出目錄下，還會將生成圖片路徑返回

　　接下來編寫配置文件module項

　　

 

 

 　　接下來進行打包，會發現dist輸出目錄下多出圖片，名字為hash值，如下所示

　　

　　

 

 

 　　控制台輸出打包后的圖片路徑，所以修改js如下

　　

 　　再次打包，此時便可以由js引入圖片進行打包輸出

　　

 

　　自定義輸出文件目錄outputPath，詳見文檔file-loader.

 

 　　

 

 　　接着打包輸出，則圖片會被打包到dist/imgs目錄下

　　

　　2、接下來看下css圖片處理

　　

 

 　　這里我們直接正常編寫，css-loader會自動幫我們做處理，即上面寫法會自動轉換如下

　　

 

 　　即會自動幫我們將圖片打包

　　3、接下來測試下html引入圖片

　　

 

 　　打包如下，發現打包后並沒有生成對應html圖片打包，這里便需要用到loader

　　

　　接下來安裝對應loader，如下

>npm i html-withimg-loader -D（由國人編寫，作用專門幫助我們解析html中的img進行打包輸出）

　　然后編寫相關配置

　　

 

 　　此時打包測試，如下所示

　　

原因分析：
    因為新版file-loader使用了ES Module模塊化方式，將esModule配置為false就可以解決這個問題

　　如下所示

　　

 

 　　即

　　

　　此時便可以實現HTML圖片資源打包

小結：

1、當你 import MyImage from './my-image.png'，該圖像將被處理並添加到 output 目錄，_並且_ MyImage 變量將包含該圖像在處理后的最終 url。
2、當使用 css-loader 時，如上所示，你的 CSS 中的 url('./my-image.png') 會使用類似的過程去處理。loader 會識別這是一個本地文件，並將 './my-image.png' 路徑，
   替換為輸出目錄中圖像的最終路徑。
3、html-withimg-loader 以相同的方式處理 <img src="./my-image.png" />。

 

　　

 

（2）打包文件分類

　　

 

 

 

 

 

 

 

 

（3）

 

 

 

 

 

.

名稱

類型

默認值

描述

name

{String|Function}

[hash].[ext]

為你的文件配置自定義文件名模板

context

{String}

this.options.context

配置自定義文件 context，默認為  webpack.config.js  context

publicPath

{String|Function}

__webpack_public_path__

為你的文件配置自定義  public 發布目錄

outputPath

{String|Function}

'undefined'

為你的文件配置自定義  output 輸出目錄

useRelativePath

{Boolean}

false

如果你希望為每個文件生成一個相對 url 的  context 時，應該將其設置為  true

emitFile

{Boolean}

true

默認情況下會生成文件，可以通過將此項設置為 false 來禁止（例如，使用了服務端的 packages）