爲webpack提供運行時複製靜態資源

前言

爲了方便調試代碼，在開發過程當中咱們會藉助webpack-dev-server，它會將文件保存在內存中，一般狀況下這種方法很合適，不過若是咱們要本身實現一個腳手架工具就會有一些問題。

好比 VueCLI 的public文件夾，它定義了靜態資源，在開發和生產中會原封不動的複製，而在 webpack 中咱們想要實現一個複製文件的功能，須要本身去編寫對應的插件或者找到對應的插件，這裏就以copy-webpack-plugin爲例，下面講解一下怎麼實現開發過程當中複製靜態資源

writeToDisk

在webpack-dev-server文檔中咱們能夠找到writeToDisk選項，它的做用就是將文件寫入到 webpack 指定的配置文件處，咱們能夠簡單設置爲 true，再次運行 webpack 就能夠發現，文件已經寫到了磁盤。

這裏咱們已經實現了第一步的功能，不過仔細來看仍是有問題的，好比說開發環境下的文件咱們應該讓他隱藏起來，最起碼不該該讓它跟最終生產環境下的打包路徑一致。

臨時文件夾

這裏有兩個思路：

1. 在項目的node_modules文件內建立一個緩存文件夾
2. 使用 fs.mkdtemp 惟一的臨時目錄，它會在重啓電腦後清除

這裏我使用了第一個方案，以後就是修改output，爲了方便維護代碼，這裏推薦使用webpack-merge來定義多個配置文件，以後更改 serve 的配置文件，將output.path改成生成的臨時目錄地址。

這裏須要注意一下 webpack 的執行順序，webpack 返回的能夠是一個 Promise 函數，基於這個臨時文件生成以後在 resolve

複製

實現上述以後，這一步就比較簡單，參考文檔在plugins寫入便可。

plugins: [
    new CopyPlugin([
      { from: '原路徑', to: '複製到...' },
    ]),
  ]
複製代碼

最後

能夠參考一下我寫的一個簡單腳手架工具，在build/webpack.dev.js文件下有關於上述的實現能夠參考一下