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

最新推荐文章于 2024-03-22 09:57:01 发布
最新推荐文章于 2024-03-22 09:57:01 发布
阅读量923 收藏
点赞数
分类专栏： webpack学习 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xt_123456/article/details/106169898
版权
拷贝静态文件

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

具体步骤

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

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

const CopyWebpackPlugin = require('copy-webpack-plugin'
最低0.47元/天 解锁文章
xt_123456
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决在配置copy-webpack-plugin插件时报错
sinat_37503265的博客
07-05 5115
配置如下： 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 1781
需要处理的静态资源： 图片 字体 json 文件 视频 音频 图片处压缩 图片压缩需要使用第三方插件，这里我使用 image-webpack-loader 来做图片的压缩处理，实现方式并不复杂，只需要在原来的 file-loader 或者 url-loader 下面加一个处理器即可，下面直接上配置代码： { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, use: [ { loader: 'url-loader',
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
webpack 单独打包指定JS文件（CopyWebpackPlugin）
weixin_30436101的博客
04-15 852
背景： 不确定打出的前端包所访问的后端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 4163
①优秀文章 关于 copy-webpack-plugin 的用处和使用_JDDDDDDyaya的博客-CSDN博客_copyplugin ②简要概括 在项目运行或打包上线（代码混合混淆压缩成bundle.js）的过程中,最后依赖文件的位置发生变化，那么需要将文件进行移动。 copy-webpack-plugin插件就是代替人工做好这件事情 plugins: [ new CopyWebpackPlugin([ {
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...
Webpack4-WEB:这是一个框架无关的基于Webpack4构建的前端开发脚手架
05-13
Webpack4配置备忘录版本 : webpack 4.10.2入口文件 ：./src/index.js输出目录 ：./dist支持 ：ES6语法、代码压缩、代码分割、Eslint语法检查、Less、Sass、Stylus、自动补全浏览器兼容css代码、源代码映射、本地...
拷贝自vue官方webpack可供vuecli使用的一个自定义模板
08-10
4. **依赖库**：在`package.json`中，列出了所有项目依赖的npm包，如Vue、Vue Router、Vuex等，以及开发依赖的Webpack插件和loader。 5. **脚本**：`package.json`中的`scripts`字段，定义了运行项目的命令，如`npm...
基于gulp的静态页面构建工具
08-10
构建流程通常包括清理旧的构建产物、编译源码、压缩资源、拷贝静态文件（如图片、字体等）、生成版本号（便于缓存控制）以及部署到服务器。通过灵活组合和配置这些任务，你可以定制出符合项目需求的构建流程。 在...
Webpack4 配置copy-webpack-plugin^6.0.3的ignore
Dreamy_LIN的博客
07-14 1682
我的版本 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 4161
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 1111
const path = require("path"); const webpack = require("webpack"); const VueLoaderPlugin = require("vue-loader/lib/plugin"); const HtmlWebapckPlugin = require("html-webpack-plugin"); const MiniCssExtr...
webpack
无名小小卒的博客
01-12 5699
webpack
webpack打包之 copy-webpack-plugin
qq_40922656的博客
07-18 2584
在离线应用中，前端所有文件都需在在本地，有些文件（比如iconFont以及一些静态img)需要转为离线文件，这些文件可以直接引用更方便些，这就需要在打包时直接复制到打包文件下。copy-webpack-plugin 打包复制文件插件。3、配置webpack。1、什么时候要使用？
webpack：详解CopyWebpackPlugin，复制的同时修改文件内容
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
09-16 3142
CopyWebpackPlugin 是一个强大的 Webpack 插件，用于将文件从源目录复制到构建目录。在本文中，我们将探讨 CopyWebpackPlugin 的一些常用 API，并提供示例代码。在构建 Web 应用程序时，通常需要将一些静态文件（如 HTML、CSS、图片等）从源目录复制到构建目录。为了实现这一功能，我们可以使用 CopyWebpackPlugin。这个插件可以将源文件复制到构建目录，并且可以自定义复制行为。
webpack plugin源码解析(二) copy-webpack-plugin
weixin_43294560的博客
04-13 1134
用于创建文件系统的快照。快照是文件系统状态的一份副本，包含了文件的元数据以及每个文件的最后修改时间戳。
探索 `copy-webpack-plugin`: 一个简单高效的静态资源复制工具
最新发布
gitblog_00044的博客
03-22 463
探索 copy-webpack-plugin: 一个简单高效的静态资源复制工具 项目地址:https://gitcode.com/kevlened/copy-webpack-plugin 项目简介 在前端开发中，我们经常需要将一些非模块化的静态资源（如图片、字体文件或HTML模板）引入到我们的Web应用中。copy-webpack-plugin就是为此目的设计的一个轻量级插件，它使得在Webpac...
webpack 实现 CopyWebpackPlugin
知之为知之，不知为不知
05-25 1118
CopyWebpackPlugin 将已经存在的单个文件或整个目录复制到构建目录。
简述webpack如何运行的?简述你了解的webpack几个插件，并分别说明有什么作用?
08-18
### 回答1： Webpack 是一个 JavaScript 模块打包器，它的运行主要分为以下几个步骤： 1. 分析项目中的文件，找出所有的依赖关系； 2. 根据依赖关系生成一个依赖图； 3. 根据依赖图将所有的模块打包成一个或多个文件； 4. 将打包后的文件输出到指定目录，并在项目中引用。 我了解的几个常用的 webpack 插件有： 1. clean-webpack-plugin：清理构建目录中的无用文件； 2. html-webpack-plugin：自动生成 HTML 文件，并将打包后的文件自动添加到 HTML 中； 3. mini-css-extract-plugin：将 CSS 从主文件中分离出来，以 link 的形式引入 HTML 中； 4. optimize-css-assets-webpack-plugin：压缩 CSS 文件； 5. uglifyjs-webpack-plugin：压缩 JavaScript 文件。 ### 回答2： Webpack 是一个静态模块打包工具。它将多个模块的依赖关系以及模块本身转化为静态资源文件，使得浏览器可以加载并执行。Webpack 的运行过程分为以下几个步骤： 1. 配置：根据项目的需求，设置 webpack 的配置文件，包括入口文件、输出路径、插件等。 2. 入口分析：根据配置文件中的入口文件，Webpack 根据文件之间的依赖关系，递归地分析出所有的模块。 3. 加载器处理：Webpack 可以使用不同的加载器，将不同类型的文件转换为 JavaScript 模块。例如，可以使用 Babel 加载器将 ES6 代码转换为 ES5 代码。 4. 插件应用：Webpack 有很多插件可以使用，用于处理额外的任务，例如压缩代码、拷贝静态文件等。 5. 输出打包：根据配置文件中的输出路径和文件名，Webpack 将打包结果输出为静态资源文件，包括 JavaScript、CSS 和图片等文件。 常见的几个 Webpack 插件如下： 1. HtmlWebpackPlugin：自动生成 HTML 文件，并将打包生成的所有资源文件自动引入到 HTML 中。 2. MiniCssExtractPlugin：将 CSS 文件单独提取出来，并生成单独的 CSS 文件。 3. CleanWebpackPlugin：每次打包之前清理输出目录，避免旧的文件影响新的打包结果。 4. UglifyJsPlugin：压缩 JavaScript 代码，使其文件体积更小，加快网页加载速度。 5. CopyWebpackPlugin：将静态文件从源目录拷贝到输出目录，例如将图片等资源文件拷贝到 dist 目录。 这些插件都可以根据项目的需求，提供相应的功能增强，使得使用 Webpack 进行打包更加便捷和灵活。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值