查看: 370|回复: 0

[JavaScript/JQuery] 运用webpack复制静态文件

发表于 2018-4-7 08:00:02
1. 运用yarn或npm添加相应的依赖包


在命令行中输入

  1. npm install copy-webpack-plugin --save-dev
复制代码

  1. yarn add copy-webpack-plugin -D
复制代码

2. 在webpack.config.js 中引入依赖,根据实际项目路径并进行配置


运用webpack复制静态文件

图1:

运用webpack复制静态文件

当项目需要转移某个文件夹,并忽略掉某些特定文件时(例:test.html):


运用webpack复制静态文件

图2:

运用webpack复制静态文件

3. 然后通过webpack进行打包


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

  1. webpack --mode production
复制代码


图1配置打包可得结果如下:


运用webpack复制静态文件

图2配置打包可得结果如下:

运用webpack复制静态文件


可以发现,静态文件都已经按要求成功进行转移。


注:常见错误


??文件夹的相对路径比较容易写错,构建就会报如下错误

  1. Error in [copy-webpack-plugin] unable to local "**" at "**"
复制代码


??使用Node.js中的全局变量__dirname+文件夹路径即可(例:“/src/assets”)



回复

使用道具 举报