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

最新推荐文章于 2024-09-27 16:16:30 发布
最新推荐文章于 2024-09-27 16:16:30 发布
阅读量983 收藏
点赞数
分类专栏： webpack学习 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xt_123456/article/details/106169898
版权
本文介绍了如何使用copy-webpack-plugin在webpack4中拷贝静态文件，如图片和文档。通过安装插件、配置webpack.config.js，将public中的资源复制到build目录。注意，不同版本的插件配置可能存在差异，遇到错误时需检查是否因版本更新导致，可参考官方文档解决。
摘要由CSDN通过智能技术生成
拷贝静态文件

这里的静态文件是指项目中未引用到的一些资源，比如一些图片、开发文档等。如果开发完成后，需要保留这些静态资源，要一起打包到项目中去，就需要拷贝静态文件，用到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里写配置࿱

最低0.47元/天 解锁文章
xt_123456
关注
专栏目录
webpack入门学习4（打包html文件、分离压缩css文件、拷贝静态文件、每次打包自动清除旧文件）
weixin_42292991的博客
10-04 965
生成HTML(html-webpack-plugin) 1.了解html-webpack-plugin HtmlWebpackPlugin会自动为你生成一个HTML文件，根据指定的index.html模板生成对应的 html 文件。会根据public下的index.html自动在打包后的目录下生成html文件，相关引用关系和文件路径都会按照正确的配置被添加进生成的html里。 2.安装依赖 ...
webpack
无名小小卒的博客
01-12 5827
webpack
解决在配置copy-webpack-plugin插件时报错
sinat_37503265的博客
07-05 5229
配置如下： new CopyWebpackPlugin({ from: path.resolve(__dirname, './src/assets'), to: 'assets' }) 报错信息 ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API
webpack4 处理静态资源
zhu562002124的博客
05-28 1848
需要处理的静态资源： 图片 字体 json 文件 视频 音频 图片处压缩 图片压缩需要使用第三方插件，这里我使用 image-webpack-loader 来做图片的压缩处理，实现方式并不复杂，只需要在原来的 file-loader 或者 url-loader 下面加一个处理器即可，下面直接上配置代码： { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, use: [ { loader: 'url-loader',
【Webpack】assets 和 static（public）的区别
最新发布
小秀的博客
09-27 229
因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是 static 中的资源文件由于没有进行压缩等操作，所以文件的体积也就相对于 assets 中打包后的文件提交较大点。在服务器中就会占据更大的空间。而项目中引入的第三方的资源文件如iconfoont.css 等文件可以放置在 static 中，因为这些引入的第三方文件已经经过处理，不再需要处理，直接上传。assets 中存放的静态资源文件在项目打包时，也就是运行 npm run build 时会将 assets 中放置的静态资源文件进行打包上传。
webpack4的copy-webpack-plugin
qq_43661347的博客
02-01 1217
1.打包后html引入的文件资源找不到报错的问题。 解决方案：因为打包后的dist文件没有之前静态资源路径。 webpack的copy-webpack-plugin插件的作用是将项目中的某单个文件或整个文件夹在打包的时候复制一份到打包后的文件夹指定的文件中。 安装： npm install -D copy-webpack-plugin； 引入 const CopyWebpackPlugin = require(“copy-webpack-plugin”)； 在webpack 的plugins 配置； ne
webpack 拷贝文件
热门推荐
ISaiSai的专栏
02-16 1万+
特殊情况下需要通过webpack拷贝文件 可以引入https://github.com/kevlened/copy-webpack-plugin在webpack 在DEV下，copy 不会拷贝 ，需要webpack -p 的时候才会落入文件如下是 webpack.config.js 的demo，将thirdpart 下的abc.js 文件拷贝到build文件夹下 new CopyWebpackPl
webpack4实操笔记
weixin_33860147的博客
08-13 218
webpack webpack是模块化管理工具，使用webpack可以对模块进行压缩、预处理、按需打包、按需加载等 四个核心概念 入口entry入口起点指webpack应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack会找出有哪些模块和库是入口起点（直接和间接）依赖的。输出output告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文...
vue-cli webpack2项目打包优化分享
08-28
本文分享了 Vue-Cli Webpack2 项目打包优化的几种方法，包括模块搜索范围的优化、合理设置 test、include、exclude、替换代码压缩工具、拷贝静态文件、DllPlugin & DllReference 等。这些方法可以大大减少项目的构建...
copy-then-auto-git:用于拷贝静态资源，自动git提交到远程仓库的webpack插件
05-08
webpack插件 copy-then-auto-git 用于自动拷贝静态资源、自动提交到远程仓库 插件能帮助我们做什么？插件会按步骤自动进行以下工作 在gitDir路径下切换branch分支 git pull远程仓库branch分支代码 删除destination...
webpack 单独打包指定JS文件（CopyWebpackPlugin）
weixin_30436101的博客
04-15 878
背景： 不确定打出的前端包所访问的后端IP，需要对项目中IP配置文件单独拿出来，方便运维部署的时候对IP做修改。因此，需要用webpack单独打包指定文件。npm install --save-dev copy-webpack-plugin Copy files and directories in webpack,在webpack中拷贝文件和文件夹 打印： 转...
关于vue中vue.config.js配置中的copy-webpack-plugin的作用于配置要求
qq_46160082的博客
02-02 4326
①优秀文章 关于 copy-webpack-plugin 的用处和使用_JDDDDDDyaya的博客-CSDN博客_copyplugin ②简要概括 在项目运行或打包上线（代码混合混淆压缩成bundle.js）的过程中,最后依赖文件的位置发生变化，那么需要将文件进行移动。 copy-webpack-plugin插件就是代替人工做好这件事情 plugins: [ new CopyWebpackPlugin([ {
Webpack4 配置copy-webpack-plugin^6.0.3的ignore
Dreamy_LIN的博客
07-14 1765
我的版本 copy-webpack-plugin: ^6.0.3 const CopyWebpackPlugin = require('copy-webpack-plugin'); plugins: [ new CopyWebpackPlugin({ patterns: [{ from: path.join(__dirname,'../static'), to: 'static', globOptions: {
vuecli4配置vue.config.js
weixin_42125737的博客
02-18 4192
constCopyWebpackPlugin=require('copy-webpack-plugin'); constHtmlWebpackPlugin=require('html-webpack-plugin') constpath=require('path'); console.log(1111111111111,process.env.NODE_ENV) mo...
Webpack 4 配置vue多页面打包最佳实践
qq_21430819的博客
03-21 1154
const path = require("path"); const webpack = require("webpack"); const VueLoaderPlugin = require("vue-loader/lib/plugin"); const HtmlWebapckPlugin = require("html-webpack-plugin"); const MiniCssExtr...
webpack：详解CopyWebpackPlugin，复制的同时修改文件内容
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
09-16 4687
CopyWebpackPlugin 是一个强大的 Webpack 插件，用于将文件从源目录复制到构建目录。在本文中，我们将探讨 CopyWebpackPlugin 的一些常用 API，并提供示例代码。在构建 Web 应用程序时，通常需要将一些静态文件（如 HTML、CSS、图片等）从源目录复制到构建目录。为了实现这一功能，我们可以使用 CopyWebpackPlugin。这个插件可以将源文件复制到构建目录，并且可以自定义复制行为。
webpack打包之 copy-webpack-plugin
qq_40922656的博客
07-18 2739
在离线应用中，前端所有文件都需在在本地，有些文件（比如iconFont以及一些静态img)需要转为离线文件，这些文件可以直接引用更方便些，这就需要在打包时直接复制到打包文件下。copy-webpack-plugin 打包复制文件插件。3、配置webpack。1、什么时候要使用？
webpack plugin源码解析(二) copy-webpack-plugin
weixin_43294560的博客
04-13 1269
用于创建文件系统的快照。快照是文件系统状态的一份副本，包含了文件的元数据以及每个文件的最后修改时间戳。
webpack 学习笔记
weixin_46147758的博客
03-28 640
是一个用于在 webpack 构建过程中复制文件和目录的插件。它可以将指定的文件或目录从源路径复制到目标路径，以便在输出目录中包含这些文件。
webpack4构建多入口、多页面项目实战解析
同时，可能还需要使用`copy-webpack-plugin`来拷贝静态资源，以及`clean-webpack-plugin`清理构建目录等。 Webpack 4构建多页面应用涉及的主要步骤包括配置多入口、设置开发服务器、定义Webpack规则以及优化输出...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值