运用webpack复制静态文件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了运用webpack复制静态文件相关的知识,希望对你有一定的参考价值。

1. 运用yarn或npm添加相应的依赖包

 
在命令行中输入
 

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

    yarn add copy-webpack-plugin -D

 

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

 
技术分享图片
 
技术分享图片
 

3. 然后通过webpack进行打包

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

    webpack --mode production

 
技术分享图片

可以发现,静态文件以及进行成功转移。
 
注:常见错误
 
  文件夹的相对路径比较容易写错,构建就会报如下错误
 

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

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

以上是关于运用webpack复制静态文件的主要内容,如果未能解决你的问题,请参考以下文章

webpack设置不打包文件

webpack配置篇(三十三):冒烟测试介绍和实际运用

使用 Webpack 文件加载器导入静态 json 文件给出文件路径而不是 json 内容

在 webpack 开发服务器中提供静态资源

vue-cli静态资源处理

在 Webpack 中加载静态 JSON 文件