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

凹凸卿發表於2017-08-28
Web

基於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="">複製程式碼

相關文章