工作中會有一些已經存在但在專案中沒有引用的圖片資源或者其他靜態資源（比如設計圖、開發文件），這些靜態資源有可能是文件，也有可能是一些額外的圖片，而在打包時保留這些靜態資源，直接打包到指定資料夾中。此時就需要使用到copy-webpack-plugin這個外掛了。

copy-webpack-plugin：靜態資源轉移的外掛。

1.copy-webpack-plugin的使用

1.1 靜態資源

在src目錄下，新建一個存放靜態資源的資料夾public（假設裡面有大量的靜態資源（圖片、檔案等））

1.2 外掛安裝

使用npm安裝（或者cnpm安裝）

cnpm install --save-dev copy-webpack-plugin

 --save-dev:表示此外掛只在開發階段使用。

1.3 引入外掛

安裝好後，需要在webpack.config.js檔案的頭部引入這個外掛才可以使用。

const  copyWebpackPlugin= require("copy-webpack-plugin");

1.4 配置外掛

外掛引入之後，我們需要在webpack.config.js檔案中的plugins屬性裡邊進行配置外掛，相關配置程式碼如下：

new copyWebpackPlugin([{
        from:__dirname+'/src/public',//靜態資源路徑
        to:'public'//跟隨output目錄存放在public目錄下
    }])
 

• from:要打包的靜態資源目錄地址，這裡的__dirname是指專案目錄下，是node的一種語法，可以直接定位到本機的專案目錄中。(__dirname變數獲取當前模組檔案所在目錄的完整絕對路徑)

• to:要打包到的資料夾路徑，跟隨webpack.config.js檔案中output屬性中配置的目錄（dist目錄）。所以不需要再自己加__dirname。

1.5 打包

配置好後，在終端進行打包，此時在打包出的dist目錄中多了一個public目錄，其下面的靜態資源與src目錄的public靜態資源一樣。

打包命令：

npm run dev