(22/24) webpack實戰技巧：靜態資源集中輸出

工做中會有一些已經存在但在項目中沒有引用的圖片資源或者其餘靜態資源（好比設計圖、開發文檔），這些靜態資源有多是文檔，也有多是一些額外的圖片，而在打包時保留這些靜態資源，直接打包到指定文件夾中。此時就須要使用到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