3-4 webpack4插件-拷贝静态文件（以及错误解决）

最新推荐文章于 2024-08-22 09:49:34 发布

原创最新推荐文章于 2024-08-22 09:49:34 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

webpack学习专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何使用copy-webpack-plugin在webpack4中拷贝静态文件，如图片和文档。通过安装插件、配置webpack.config.js，将public中的资源复制到build目录。注意，不同版本的插件配置可能存在差异，遇到错误时需检查是否因版本更新导致，可参考官方文档解决。

拷贝静态文件

这里的静态文件是指项目中未引用到的一些资源，比如一些图片、开发文档等。如果开发完成后，需要保留这些静态资源，要一起打包到项目中去，就需要拷贝静态文件，用到copy-webpack-plugin插件。
例如下图就是把public中的静态资源拷贝到build文件夹下：
在这里插入图片描述

具体步骤

1.安装插件
打开终端，进入到项目文件夹路径，输入命令cnpm install --save-dev copy-webpack-plugin

2.配置webpack.config.js文件
首先，引入插件：

const CopyWebpackPlugin = require('copy-webpack-plugin');

3.在module.exports = {}里的plugins里写配置：

new CopyWebpackPlugin({
     patterns: [
       { from: __dirname+'/public/assets', to: __dirname+'/build/assets' },
     ],
   }),

4.在终端输入npm run dev进行打包。

！！！此处需要注意的是：
原来的版本，在module.exports = {}里的plugins里写配置为：

new CopyWebpackPlugin([
	    {
	      from:__dirname+'/public/assets',
	      to:__dirname+'/build/assets'
	    }
   ]),

如果在最近的版本中这样写就会报错，报错为：Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.如下图：
在这里插入图片描述
注：我的copy-webpack-plugin版本为：

所以，在安装webpack插件的时候，如果报错，需要检查一下是不是由于版本更新，而更新了使用插件的写法所导致的错误。可以去官网查一下插件的使用方法。
官网链接: https://webpack.js.org/plugins/copy-webpack-plugin/.