基於webpack的幾種靜態資源的引入方案

基於webpack && html引入靜態資源的幾種方法

GitHub博客 github.com/aototo/blog 喜歡的start，長期更新

---

咱們須要在頁面插入圖片:

index.html

<img src = 'assets/images/xxx.jpg' />複製代碼

由於這個圖片webpack並無被加載進來，會獲得404的結果。

一般的作法是在對應的js中require該資源

require('./assets/images/xxx.jpg');複製代碼

這樣就在內存中能夠訪問到內存中圖片。（可是要注意文件加載的路徑問題，最簡單的就是按照構建的生產環境的資源路徑）還要注意圖片是否有hash值。

如下是js輸出的圖片資源路徑

./images/acb790246029d8f127588eacd3005fbei1.jpg複製代碼

好比最後生成的資源路徑。頁面也須要按照這樣引入，顯然是不可能的。

<img src = './images/acb790246029d8f127588eacd3005fbei1.jpg' />複製代碼

當一個項目靜態圖片多的時候如何處理？好比一個不須要後端圖片數據的前端活動頁面？接下來有三種方法。

使用CopyWebpackPlugin

copy-webpack-plugin
把靜態資源都拷貝到構建目錄。使用方法也很是簡單。

const CopyWebpackPlugin = require('copy-webpack-plugin');複製代碼

Usage

new CopyWebpackPlugin([
    { from: path , to: bundle_path }
])複製代碼

這樣就能夠在頁面中愉快的使用目錄地址了（注意的是資源路徑按照最終構建完成的目錄）
以下是構建完畢後的目錄

| dist
| ---- | images
| ---------- | xxx.jpg
| ---- | index.html

<img src='./images/xxxx.jpg' alt="">複製代碼

CopyWebpackPlugin 能把所有靜態資源所有拷貝過去，從而優化webpack在構建上面的速度，減小時間，是一個不錯的優化方案，能夠建議使用。

在 html文件中使用require

<img src='<%= require("./assets/images/xxx.jpg") %>'>複製代碼

這種方法跟import是同樣的，咱們能夠直接使用它，還能夠配置alias,來簡化這個path的名字

resolve: {
    alias: {
      imageBase: '../app/assets/images'
    },
 },複製代碼

設置後頁面中可使用alias來代替路徑問題

<img src='<%= require("imageBase/xxx.jpg") %>' >複製代碼

同事css也可使用，配合~

background: url('~imageBase/xxx.jpg')複製代碼

此時~告訴webpack這是一個module,而不是相對路徑。
github.com/webpack-con…
alias的使用一樣也可讓構建的速度提高，直接鎖定資源的地址，從而減小搜索的耗時。

使用html-loader

目前比較省力的方案

{
    test: /\.html$/,
    loader: 'html?attrs=img:src img:data-src'
}複製代碼

它默認處理html中的<img src="image.png">爲require("./image.png"),
同時還處理了hash文件名的問題。可是html-loader不支持下劃線模板。會致使HtmlWebpackPlugin的變量模板失效。
具體問題：
github.com/jantimon/ht…
github.com/jantimon/ht…

---

以上的方法能夠結合使用，好比2，3中使用的話,不但簡化了圖片的路徑問題，還優化了構建速度，同時引入靜態資源也很是的簡單。

例子：

<img src='~imageBase/xxx.jpg' alt="">複製代碼