運用webpack複製靜態文件

1. 運用yarn或npm添加相應的依賴包

 
在命令行中輸入
 

    npm install copy-webpack-plugin --save-dev

或

    yarn add copy-webpack-plugin -D

 

2. 在webpack.config.js 中引入依賴，根據實際項目路徑並進行配置

 

  
 圖1：
  

  
當項目需要轉移某個文件夾，並忽略掉某些特定文件時（例：test.html）：

 

 
圖2：
 

3. 然後通過webpack進行打包

  
在命令行中輸入(webpack4.x版本):
  
 

    webpack --mode production

 
圖1配置打包可得結果如下：
 
 

 
圖2配置打包可得結果如下：
 

 
可以發現，靜態文件都已經按要求成功進行轉移。
 
 
注：常見錯誤
 
 
  文件夾的相對路徑比較容易寫錯，構建就會報如下錯誤
 
 

    Error in [copy-webpack-plugin] unable to local "**" at "**"

 
  使用Node.js中的全局變量__dirname+文件夾路徑即可（例：“/src/assets”）