webpack 拷贝插件的使用 copy-webpack-plugin

最新推荐文章于 2025-06-24 17:28:04 发布

原创最新推荐文章于 2025-06-24 17:28:04 发布 · 2.3w 阅读

1 ·

CC 4.0 BY-SA版权

web pack 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Webpack的CopyWebpackPlugin插件，在构建过程中将指定文件从源目录复制到目标目录。通过安装并配置该插件，可以在Webpack打包时同步复制静态资源文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在webpack 在DEV下，copy 不会拷贝，需要webpack -p 的时候才会落入文件

如下是 webpack.config.js 的demo，将thirdpart 下的abc.js 文件拷贝到build文件夹下

先安装插件的类

cnpm install --save-dev copy-webpack-plugin

进行文件配置

// Plugins
var CopyWebpackPlugin = require('copy-webpack-plugin');


 plugins: [

new CopyWebpackPlugin([ // 复制插件
        { from: path.join(__dirname,'app/node/main.js'), to:  path.join(__dirname,'public/node/') }
      ])
]

]

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

IT有钱人

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

简说webpack plugin

分享技术，前沿人工智能动态

08-12

2203

plugin(插件)是webpack的支柱功能,webpack整体的程序架构也是基于插件系统之上搭建的,plugin的目的在于解决loader无法实现的其他功能.

vue项目中实现pdf文件预览功能

xm2by的博客

08-09

2万+

vue项目中实现pdf文件预览功能最近遇到一个实现pdf文件预览功能的需求，分享一下实现方法： pdf预览相对word、excel、ppt等文件的预览比较容易，因为常见的浏览器都是支持pdf文件直接预览，所以最简单的实现方法就是在浏览器中直接输入pdf文件存放在服务器上的路径地址就可以直接预览； 1、使用浏览器默认支持访问pdf文件的功能 1.1、当后端返回的是pdf文件在服务器上的路径时，直接...

参与评论您还未登录，请先登录后发表或查看评论

webpack---webpack中经典实用的插件copy-webpack-plugin拷贝资源插件

最新发布

weixin_42713787的博客

06-24

119

可以看出以上源码中,使用的Promise.all()并行处理,当我们需要通过参入的数组patterns按顺序覆盖会出现问题,查看新版本源码得知已修复此问题。

gitblog_01016的博客

08-25

482

webpack打包复制文件插件 -- copy-webpack-plugin

x先生的博客

01-28

1万+

在离线应用中，前端所有文件都需在在本地，有些文件（比如iconFont)需要转为离线文件，这些文件可以直接引用更方便些，这就需要在打包时直接复制到打包文件下。前端的文件复制让人直接联想到node的fs，可以在打包时调用文件复制方法，当然webpack提供一款插件来解决这一问题：copy-webpack-plugin。安装插件： cnpm i copy-webpack-plugin -D /*...

copy-webpack-plugin-demo.rar

11-23

copy-webpack-plugin-demo.rar 拷贝文件demo, 现成案例,可以参考使用免积分下载地址 https://download.lllomh.com/cliect/#/product/JB23148366892270

webpack插件filemanager-webpack-plugin(管理打包后的文件路径)

Joyce的前端日常

07-15

1万+

前言项目中使用这个webpack插件是基于这样一个业务场景：传统CMS项目，路由不在前端，后端需要前端提供文件前端需要将打包好的html、js和css文件输出到指定的后端文件夹路径（避免需后端拷贝代码） filemanager-webpack-plugin github: https://github.com/gregnb/filemanager-webpack-plugin 安装 np...

Webpack构建后的文件复制神器：webpack-copy-after-build-plugin

资源摘要信息:"webpack-copy-after-build-plugin是一个专门用于Webpack构建过程之后进行文件复制的插件。它通过sprockets指令，可以将Webpack打包后的构建工件包含到Rails应用程序中，从而帮助减少启动时间并减少在...

是compression-webpack-plugin，不是copy-webpack-plugin

03-25

### compression-webpack-plugin 与 copy-webpack-plugin 的功能差异及使用场景 #### 功能差异 compression-webpack-plugin 主要用于生成静态资源的压缩版本，从而提高网站性能并减少带宽消耗。它能够基于指定的...

webpack打包-----plugin

越努力,越幸运~~

05-13

903

为什么要用插件？loader 和plugin的区别loaderplugin常见的pluginclean-webpack-pluginhtml-webpack-plugincopy-webpack-plugin自定义plugin开发----- loader 和plugin的区别 loader loader：主要用于对模块源码的转换，因为webpack本身只支持js处理，loader描述了webpack如何处理非javascript模块，并且在build中引入这些依赖。loader可以将文件从不同css预处理转

关于 copy-webpack-plugin 的用处和使用

JDDDDDDyaya的博客

05-25

1万+

webpack打包的时候，使用 html-webpack-plugin ，在template指定的demo.html 里面引入的本地的一些script 文件，打包之后，总是会报这里文件找不到，看下面： //这是在这个demo.html里面引入的本地test.js 文件 <body> <script src="js/test.js"></script> ...

webpack插件: CopyWebpackPlugin

cnzzs的博客

12-19

621

CopyWebpackPlugin是一个在 Webpack 构建过程中非常实用的插件，它的主要功能是将文件或文件夹从一个地方复制到另一个地方。这个插件在开发环境和生产环境中都很有用，比如，你可以用它来复制静态资源、配置文件或者其他任何需要在构建过程中被复制的文件。安装要使用CopyWebpackPlugin，你首先需要...

Webpack5 CopyPlugin的作用

有趣的小良的博客

07-25

1367

在Webpack 5中，CopyPlugin是一个插件，用于将文件或目录从源位置复制到构建目录中。它的作用是帮助开发人员在构建过程中将静态文件（如图片、字体等）直接复制到输出目录，而无需经过任何处理。CopyPlugin并不是必须的，它的使用与具体项目需求相关。如果你的项目需要复制一些静态资源到构建目录中，可以使用CopyPlugin来完成这个任务。总结：CopyPlugin的作用是复制文件或目录到构建目录中，根据项目需求而定，不是必须的插件。目录下的文件复制到输出目录的。目录下的文件复制到输出目录的。

关于vue中vue.config.js配置中的copy-webpack-plugin的作用于配置要求

qq_46160082的博客

02-02

4527

①优秀文章关于 copy-webpack-plugin 的用处和使用_JDDDDDDyaya的博客-优快云博客_copyplugin ②简要概括在项目运行或打包上线（代码混合混淆压缩成bundle.js）的过程中,最后依赖文件的位置发生变化，那么需要将文件进行移动。 copy-webpack-plugin插件就是代替人工做好这件事情 plugins: [ new CopyWebpackPlugin([ {

webpack使用babel-loader编译ES新特性

weixin_45047039的博客

11-28

649

webpack使用babel-loader编译ES新特性一、安装babel-loader以及配置二、测试效果一、安装babel-loader以及配置 yarn add babel-loader @babel/core @babel-preset-env --dev webpack.config.js配置 module.exports = { mode:"none",// 三种工作模式: none | production | development entry:"./src/index.

webpack的copy-webpack-plugin插件

xm2by的博客

04-26

8214

webpack的copy-webpack-plugin插件 webpack的copy-webpack-plugin插件的作用是将项目中的某单个文件或整个文件夹在打包的时候复制一份到打包后的文件夹中（即复制一份到dist目录下）。效果如下图所示：使用方法：给项目中添加copy-webpack-plugin插件： npm install -D copy-webpack-plugin 然后we...

copy-webpack-plugin配置以及遇到的问题

qq_41893334的博客

05-23

7684

1.什么是copy-webpack-plugin? 在打包项目的时候除了JS/CSS/图片/字体图标等需要打包以外, 可能还有一些相关的文档也需要打包文档内容是固定不变的, 我们只需要将对应的文件拷贝到打包目录中即可那么这个时候我们就可以使用copy-plugin来实现文件的拷贝 2.copy-webpack-plugin使用 https://www.webpackjs.com/plugins/copy-webpack-plugin/ 2.1安装copy-webpack-plugin npm insta

webpack 常用插件及作用

weixin_30512785的博客

03-16

336

copy-webpack-plugin ：复制文件到目标文件夹。在开发时使用热模替换，（没有生成dist 文件夹，都在内存中），如果想引用某一个js文件，直接写script标签是找不到的，因为服务器内存中没有这个文件。所以复制这个文件，到dist中。 compression-webpack-plugin：生产环境时可选择让代码压缩gzip. html-webpack-plugin : ...

vue3使用copy-webpack-plugin

01-21

### 如何在 Vue 3 中配置和使用 `copy-webpack-plugin` #### 安装为了能够在项目中使用 `copy-webpack-plugin`，需要先安装该插件。可以通过 npm 或 yarn 来完成这一步骤。 ```bash npm install copy-webpack-plugin --save-dev ``` 或者 ```bash yarn add copy-webpack-plugin --dev ``` #### 导入并初始化插件在项目的根目录下找到 `vue.config.js` 文件，在此文件内导入所需的模块，并创建一个新的 `CopyWebpackPlugin` 实例[^1]。 ```javascript const { defineConfig } = require('@vue/cli-service'); const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = defineConfig({ configureWebpack: { plugins: [ new CopyWebpackPlugin({ patterns: [ { from: 'source/path', to: 'destination/path' } ] }) ] } }); ``` 这里展示了基本的设置方式，其中 `patterns` 数组定义了哪些资源应该被复制以及它们的目标位置。可以根据实际需求调整这些路径。对于更复杂的场景，比如当有多个不同类型的文件需要处理时，可以增加更多的模式对象到数组里去： ```javascript new CopyWebpackPlugin({ patterns: [ { from: 'static/images', to: 'assets/imgs' }, { from: 'data-files/*.json', to: '[name].[ext]' }, // 使用占位符来保持原有结构 ... ] }) ``` 需要注意的是，如果遇到类似于 "compilation.getCache is not a function" 这样的错误，则可能是由于使用的 Webpack 版本与 `copy-webpack-plugin` 不兼容所引起的[^3]。此时应考虑升级或降级其中一个包以确保两者能够协同工作正常。另外一种常见的做法是在 `chainWebpack` 方法内部添加自定义规则来进行更加灵活的操作[^4]: ```javascript configureWebpack: (config) => { config.plugin('copy').use(CopyWebpackPlugin, [[{ from: path.resolve(__dirname, './src/assets'), to: path.resolve(__dirname, './dist/static') }]) } ``` 以上就是在 Vue 3 中配置和使用 `copy-webpack-plugin` 的方法概述。通过这种方式可以在构建过程中自动将指定的静态资源拷贝至目标文件夹，从而简化部署流程。