webpack踩坑三：打包其他资源

最新推荐文章于 2024-06-15 12:23:02 发布
最新推荐文章于 2024-06-15 12:23:02 发布
阅读量123 收藏
点赞数
分类专栏： webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/heyoung/article/details/116485402
版权

错误经历：打包其他资源的时候，漏掉了一些其他的文件，导致打包失败
在这里插入图片描述
还有其他的图片资源，在exclude中没有排除掉，导致图片不能正常加载

解决方案：
exclude中排除掉所有需要参与打包的文件类型
在这里插入图片描述
**

ps:切记排除掉所有的参与打包的文件类型！

**

i'm cool
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
（三）webpack打包其他资源以及优化
m0_50744582的博客
09-22 289
1.处理css的兼容性 需要使用postcss处理，下载两个包：npm i postcss-loader postcss-preset-env -D
webpack打包其他资源文件
weixin_44374938的博客
05-01 321
一、什么是loader？ 从webpack本身来说，主要是用作处理我们写的js代码，并且webpack会处理js之间的依赖。 但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css,图片，也包括一些高级的ES6转成ES5代码，将TypesScript代码庄臣ES5代码，将scss,less，转成css，将.jsx,.vue文件转成js文件等等。 对于 webpack本身的能力来说，对于这些转化是不支持的。这时候我们就可以给webpack扩展对应的loader就可以了。loader让webpac
Webpack 打包其他资源(详解)
weixin_52139094的博客
06-10 351
打包其他资源 需要安装的 npm install --save-dev html-webpack-plugin 处理html npm i url-loader file-loader -D处理图片 打包HTML资源 需要安装 npm install --save-dev html-webpack-plugin 下载完还需要引用 const HtmlWebpackPlugin = require('html-webpack-plugin'); 自动会新建一个index.html文件 打包图片资
vue-cl 有一些静态资源不想经过webpack打包那么应该public 下面
u013018357的博客
02-28 1万+
vue-cl3脚手架生成的项目，静态资源要是不想经过webpack打包，那么应该放置在public 文件夹下面。先说说vue-cl3 静态资源可以通过两种方式进行处理： 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。 放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处...
Webpack
xieyguo的博客
03-02 105
Webpack 1.简介 Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。 安装 //全局安装 npm install -g webpack webpack-cli //安装后查看版本号 webpack -v 2.初始化项目 1、创建webpack文件夹 npm init -y //得到packa
Webpack 踩坑笔记: webpack-dev-server 启动命令失败(Error: Cannot find module ‘webpack-cli/bin/config-yargs‘)
热门推荐
超悠閒的博客
06-16 1万+
Webpack 踩坑笔记: webpack-dev-server 启动命令失败(Error: Cannot find module ‘webpack-cli/bin/config-yargs’) 文章目录Webpack 踩坑笔记: webpack-dev-server 启动命令失败(Error: Cannot find module 'webpack-cli/bin/config-yargs')前言正文项目背景问题描述解决方案方案 1：使用新命令 webpack serve(推荐)方案 2：降低 webpa
webpack踩坑：DllPlugin和DllReferencePlugin配置
Vito_w7的博客
08-05 2930
webpack踩坑：DllPlugin和DllReferencePlugin配置 有个项目比较大，想着进行配置优化，提高打包速度然后网上搜了搜决定试试DllPlugin和DllReferencePlugin,但是跟着网上好几篇博客质量挺高的配下来一直有错误… 就很崩溃，后来终于解决了，记录一下。 异常现象： 打包时不报任何错误； 打开网页时报错显示如下：Uncaught ReferenceE...
webpack踩坑之路图片的路径与打包
08-29
主要介绍了webpack踩坑之路图片的路径与打包，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
crx-webpack-plugin:用于打包 chrome 扩展 (crx) 后构建的 webpack 插件
05-29
用于打包 chrome 扩展 (crx) 后构建的 webpack 插件 用法 var Crx = require ( "crx-webpack-plugin" ) ; module . exports = { plugins : [ new Crx ( { keyFile : 'key.pem' , contentPath : 'build' , ...
web-webpack-plugin：替代html-webpack-plugin
02-03
web-webpack-plugin 想全面学习Webpack？试试它： 不错替代品，可以使webpack将HTML用作条目并处理多页。 安装 npm i web-webpack-plugin --save-dev const { WebPlugin , AutoWebPlugin } = require ( 'web-...
webpack系列之：手把手教你 打包和使用js文件
11-16
webpack系列之：手把手教你 打包和使用js文件 的demo文件
webpack_v4:webpack4
04-19
webpack_v4 webpack4
深入浅出 Babel：现代 JavaScript 的编译器
NolanKy 的 技术博客
06-15 741
Babel 是一个 JavaScript 编译器，主要用于将现代 JavaScript 代码（ES6+）转换为向后兼容的 JavaScript 代码，以便在旧版本的浏览器或环境中运行。Babel 还支持转换 JSX 语法（用于 React）和 TypeScript。// Babel 接收到的输入是： ES2015 箭头函数// Babel 输出： ES5 语法实现的同等功能});为什么需要 Babel？向后兼容性。
electron模板【lectron-react-boilerplate】多窗口配置【HtmlWebpackPlugin】多页面配置
最新发布
weixin_42429220的博客
06-15 326
如果您正在使用进行快速的Electron应用程序开发，您可能会遇到想要在桌面应用程序中拥有多个原生窗口的情况。MacOS窗口图像由提供，来源。
Vite和Webpack的区别是什么，你站队谁？
贝格前端工场的博客
06-13 391
Vite和Webpack有很多相同之处，也有区别，很多老铁分不清，贝格前端工场借助此文为大家详细介绍一下。
缩窄route范围来提速本地打包的尝试
radation的博客
06-14 411
按预期，笔者使用了同步语句做文件覆盖，webpack的watch不可能会监听到多余的文件变更行为。更具fileChange的判断逻辑，只要x与y的差值小于1000，webpack就能监听到先前的文件变更，触发额外的重新构建。好吧，只能调试webpack的watcher逻辑，看下内部到底干了什么，竟能监听到生命周期之前的文件变更行为。会参与计算，这个buffer变量也就导致了webpack能监听到生命周期之前的文件变更行为。我们假设plugin生效的时间点为x，webpack监听到文件改动的事件点为y。
公司面试题总结（六）
m0_59365887的博客
06-14 1390
Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为。Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。参数是一个thenable对象，promise.resolve会将这个对象转为 Promise对象，then 方法返回的是一个新的 Promise 实例，也就是 promise 能链式书写的原因。
webpack和vite区别
weixin_45596561的博客
06-11 656
Webpack 是一个模块打包工具，它会递归地构建依赖关系图，并将所有模块打包成一个或多个bundle（包）。Vite 是一个新兴的前端构建工具，主要针对现代前端开发的需求而设计，尤其是针对开发时的热更新速度优化。Webpack适合需要复杂配置和优化的大型项目，特别是那些需要处理多种资源类型和复杂依赖的项目。Vite则更加注重开发体验和速度，适合现代前端框架的小型到中型项目，尤其是需要快速反馈和高效开发的场景。1. 不懂理论。
webpack critical dependency: require
09-03
webpack中的critical dependency: require是指在使用webpack构建项目时，出现了一种依赖关系的问题，这种依赖关系被认为是关键的，即在运行时必须被解决的依赖关系。 在webpack中，模块之间的依赖关系是通过require语句来表达的。当webpack分析代码时，如果发现某个模块通过require语句引入了其他模块，而这个引入的模块又依赖了当前模块，就会产生critical dependency: require错误。 这种错误通常是由于循环依赖引起的。循环依赖是指模块A和模块B互相引入，导致无法确定哪个模块应该先被加载的情况。在webpack中，循环依赖是被禁止的，因为它会导致代码的执行顺序混乱，进而引发各种错误。 解决这个错误的方法有几种。一种是通过重构代码来消除循环依赖，例如将共享的部分提取出来，形成一个新的模块。另一种方法是使用webpack的插件或配置来处理循环依赖，例如使用webpack-node-externals插件来排除某些模块的解析。 总的来说，当出现webpack critical dependency: require错误时，我们需要检查是否存在循环依赖的情况，并采取相应的措施来解决这个问题，以保证代码的正常运行。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值