Webpack4入門（3）

Webpack載入html 和image

想要載入html和image，和載入css大同小異，首先要安裝相對應的loader

npm install html-loader extract-loader file-loader

html-loader：幫你識別html文件

extract-loader：區分html和出口文件的[name]-bundle.js，從而輸出html文件而不是output規定的js文件

file-loader：起名，又一個options屬性，用來規定輸出文件的名字

添加的html相關loader 如下

// html loader { test:/.html$/, use:[ { loader:"file-loader", options:{ name:"[name].html" } }, { loader:"extract-loader" }, { loader:"html-loader", options:{ attrs:[img:src] } } ] }

添加的img相關loader 如下

// img loader { test:/.(jpg|png|gif|svg)$/, use:[ { loader:file-loader, options:{ name:images/[name]-[hash:8].[ext] } } ] }

弄好配置後，在src下創建html文件，刪除dist下的html和js文件。

小知識：在載入圖片的時候，file-loader的屬性options的name下，可以加hash值。開發中用的地方比較多。