什麼是 copy-webpack-plugin
進行網頁開發時有時需要將一些檔案不行處理，直接搬移到指定的路徑位置，由資料夾來源移至到指定資料夾，如果此時使用 webpack 透過 loader 進行相關的設定就會很麻煩，透過 copy-webpack-plugin 就可進行這樣的內容處理。
安裝 copy-webpack-plugin
透過 npm 指令進行安裝，指令如下。
1 2 3 4 | npm install --save-dev copy-webpack-plugin@4.6.0 // 課程使用 4.5.3 版本 npm install --save-dev copy-webpack-plugin@5.1.2 // 指定 5x 版也可執行 for webpack 4 |
使用 copy-webpack-plugin
在 webpack.config.js 檔中載入 copy-webpack-plugin 模組
copy-webpack-plugin 在 webkack 中是個模組，需要在 webpack.config.js 設定檔中由 require() 的方法引入使用。
1 | var CopyWebpackPlugin = require('copy-webpack-plugin'); |
在 webpack.config.js 檔中的 plugins: [] 加入設定使用。
1 2 3 | plugins: [ new CopyWebpackPlugin([{ from: 'assets', to: 'assets' }]) ], |
設定說明如下
- 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 指定字型樣式與字型檔的來源路徑。
1 2 3 4 | @font-face { font-family: "MyName"; src: url("~assets/fa-brands-400.ttf"); } |
調用字行時在 resolve modules 的部份還沒有進行路徑省略設定，在裡面多加入 path.resolve('src/assets'), 的設定。
由 CSS 引用字型檔路徑，但 loader 沒在 module: { rules: [] } 設定字型檔副檔名格式，所產生的錯誤與處理
沒在 module: { rules: [] } 裡設定字型檔副檔名 loader 的錯誤，執行後會訊息如下
1 2 3 4 5 6 7 | ERROR in ./assets/fa-brands-400.ttf 1:0 Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file) @ ./scss/index.scss (../node_modules/css-loader/dist/cjs.js!../node_modules/postcss-loader/src!../node_modules/sass-loader/dist/cjs.js!./scss/index.scss) 4:36-71 @ ./scss/index.scss @ ./js/index.js |
這個錯誤主要是由 postcss-loader 讀取到 index.scss 檔時，因為沒有設定字型檔副檔名的設定，所以分辨不出來這個字型檔。
要處理這個錯誤，其要是透過 CSS 與來讀取字型檔副檔名時就需要加入對應的 loader 設定，前往 module: { rules: [] } 加入下面設定。
1 2 3 4 5 6 | { test: /\.(woff|woff2|ttf|eot)$/, loader: 'file-loader', options: { name: '[path][name].[ext]?[hash:8]' } }, |
字型副檔名格式，和 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 出來。
