什麼是 copy-webpack-plugin

進行網頁開發時有時需要將一些檔案不行處理，直接搬移到指定的路徑位置，由資料夾來源移至到指定資料夾，如果此時使用 webpack 透過 loader 進行相關的設定就會很麻煩，透過 copy-webpack-plugin 就可進行這樣的內容處理。

安裝 copy-webpack-plugin

透過 npm 指令進行安裝，指令如下。

copy-webpack-plugin github

使用 copy-webpack-plugin

在 webpack.config.js 檔中載入 copy-webpack-plugin 模組

copy-webpack-plugin 在 webkack 中是個模組，需要在 webpack.config.js 設定檔中由 require() 的方法引入使用。

在 webpack.config.js 檔中的 plugins: [] 加入設定使用。


設定說明如下

  • from: 'assets'：在 src 資料夾下的處理來源資料夾，建立 assets 資料夾，在這個資料夾主要放置不經 loader 轉換的相關檔案。
  • to: 'assets'：指定輸出的資料夾 dist/assets，將設定來源的 src/assets 資料夾的檔案，直接搬移一份：

簡單使用由 src/assets 資料夾搬移至 dist/assets 資料夾

CopyWebpackPlugin 就是專門拿來搬移不會經過 loader 的 plugins。
接著在 src/assets 資料夾中新增一個檔案，裡面輸入一些內容進行測試，輸入指令 npm run deploy 查看結果，到 dest 資料夾下也會產生 assets 並重樣產生一樣檔案，檔案內得內容也都完全一樣。

這類的處理多半用於字型檔、mp3 檔、zip 檔等，都可透過 copy-webpack-plugin 此工具來進行處理。

搬移字型與設定

將字型檔放置到專案資料夾下的 src/assets 中，裡面放置的檔案有 fa-brands-400.ttf、 fa-brands-400.woff、 fa-brands-400.woff2、 fa-regular-400.eot 四個檔案。

webpack 使用字型檔要先透過 css 指定字型樣式與字型檔的來源路徑。

調用字行時在 resolve modules 的部份還沒有進行路徑省略設定，在裡面多加入 path.resolve('src/assets'), 的設定。

由 CSS 引用字型檔路徑，但 loader 沒在 module: { rules: [] } 設定字型檔副檔名格式，所產生的錯誤與處理

沒在 module: { rules: [] } 裡設定字型檔副檔名 loader 的錯誤，執行後會訊息如下

這個錯誤主要是由 postcss-loader 讀取到 index.scss 檔時，因為沒有設定字型檔副檔名的設定，所以分辨不出來這個字型檔。

要處理這個錯誤，其要是透過 CSS 與來讀取字型檔副檔名時就需要加入對應的 loader 設定，前往 module: { rules: [] } 加入下面設定。

字型副檔名格式，和 html 的 loader 處理一樣，只是透過 file-loader 執行搬移動作。

只要是 src/assets 資料夾內的檔案處理搬移，只要經由 CSS 或是 JS 引入使用的話，一定要加上 file-loader 進行透過 webpack.config.js 下的 module: { rules: [] } 處理辨別副檔名。

fontawesome 的 iconfont 字型檔主要有針對不同瀏覽器處理相容性字型，比較合適使用同一系列，以課程範例來說 fa-regular-400.eot 的中的另外一套，要同一套需要改成 fa-brands-400.eot 才會成為 fa-brands 字型下的同一套。

字型引入 css 樣式設定如下，主要使用 <i class="fab fa-facebook"></i><i class="fab fa-facebook-f"></i> 測試二個 Facebook 的 icon，可上官方的文件查看還有其他的 Facebook 的 iconfont。

設定成功後，在瀏覽器畫面上會出現二個 Facebook 的 iconfont 出來。