webpack4 生产环境css样式丢失

最新推荐文章于 2024-05-15 11:45:46 发布
最新推荐文章于 2024-05-15 11:45:46 发布
阅读量3.5k 收藏
点赞数
分类专栏： 前端问题总结 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013994400/article/details/124170891
版权

webpack4升级遇到的一些问题

webpack4 生产环境css样式丢失
package.json
“sideEffects”: [“.css",".less”,“*.scss”], 或者设置成true

vue、react配置gzip打包后，删除源文件deleteOriginalAssets: true,nginx需要的配置 CompressionWebpackPlugin 的deleteOriginalAssets nginx 配置 gzip_static on;

guhy fighting
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack4 处理CSS的方法示例
12-08
这节课讲解webpack4中打包css的应用。v4 版本和 v3 版本并没有特别的出入。 1. 准备工作 众所周知，CSS 在 HTML 中的常用引入方法有<link>标签和<style>标签两种，所以这次就是结合webpack特点实现以下功能： 将 css 通过 link 标签引入 将 css 放在 style 标签里 动态卸载和加载 css 页面加载 css 前的transform 下图展示了这次的目录代码结构：   这次我们需要用到css-loader，file-loader等 LOADER，package.json如下： { "devDependencies":
webpack-tailwindcss:在 Webpack 中使用 TailwindCSS
07-23
webpack-tailwindcss 此模板旨在帮助您基于 Webpack + TailwindCSS 启动您的项目，同时保持最佳性能实践设置，因此您不必担心基础知识。 它为您设置了一些设置，因此您不必在文档、代码拆分和 ESBuild 构建中查找它们，这应该非常快。 还设置了带有 livereload 的本地开发。 用法 要使用此模板，请单击右上角的“使用此模板”绿色按钮。 将存储库克隆到您的计算机 安装依赖项 - npm ci 配置视图在。 npm 任务 npm start - 在http://localhost:8080上运行live-server并在更改时重新加载浏览器 npm run build - 在生产模式下构建资产 webpack 设置包括 由 ESBuild (FAST) 完成的 JS 和 CSS 转换和缩小 使用mini-css-extract-plugin
vue项目打包之后背景样式丢失的解决方案
10-17
今天小编就为大家分享一篇关于vue项目打包之后背景样式丢失的解决方案，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
【webpack整理】一、安装、配置、按需加载
06-14 242
如果你： 是前端热爱者 :) 有JavaScript/nodejs基础 会使用一些常用命令行，mkdir,cd,etc. 会使用npm 想对webpack有更深的认识，或许此时你恰好遇到关于webpack的问题 那么，请继续阅读： 什么是webpack，为什么使用webpack webpack官方是这样定义她的： webpack 是一个用来构建我们应用程序中...
webpack使用mini-css-extract-plugin插件分离css样式后 压缩css样式代码 已及js代码
weixin_46337813的博客
03-02 1982
npm iterser-webpack-pluginoptimize-css-assets-webpack-plugin -D webpack.config.js中配置优化项optimization: const TerserJSPlugin = require('terser-webpack-plugin'); const MiniCssExtractPlugin =...
css打包丢失,webpack打包build时css样式-webkit-box-orient丢失问题的解决方案
weixin_39864373的博客
08-03 1191
最近遇到一个奇怪的问题，在设置超出n行即显示省略号的css时，开发环境都没有问题，而build之后发现不好使，通过调试发现是-webkit-box-orient这个样式丢失了我写的css样式display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;打包之后的css样式，缺少-we...
vue+webpack项目打包问题
深渊那支花的博客
05-14 757
vue+webpack项目打包问题1、vue项目打包出现空白页面2、vue+elementui项目打包后样式覆盖问题3、vue项目打包后elementui图标丢失问题 1、vue项目打包出现空白页面 报错页面 解决：将config/index文件里的assetsPublicPath改为‘’./‘’ 重新打包 2、vue+elementui项目打包后样式覆盖问题 解决：main.js中的引入顺序决定了打包后css的顺序，组件内的样式没有生效可能是被第三方组件样式覆盖了，所以把第三方组件放在前面引入，ro
webpack打包测试环境正常,生产环境漏掉了css文件
普普通通的博客！
07-01 1056
在使用不同环境对项目打包之后，发现生产环境的css文件没有全部被挂载，缺失了一部分，但是测试环境的是正常的。就是图里面的这几个文件，打包生产环境以后缺失了。在一番搜索之后，发现有个概念叫做tree shaking。就是说生产环境（production）在打包的时候，会默认把一些dead code，也就是代码中看起来没有引用到，没有用上的代码，自动过滤掉。那么取消过滤不就好了？或者能不能够把这个tree shaking的功能关掉呢？又搜索了一番，发现大家都是建议说在package.json里面， 调整“sid
踩坑系列：webpack打包后，css文件样式都消失了
小锋QQmm~~的香蕉乐园
10-21 4322
我在查看webpack文档学习的时候，发现打包后css文件及样式都没有了，但是一开始学习的时候没有这个问题的。 经过一番排查发现有一个坑，就是当webpack.config.js里面的mode为production时，如果webpack设置了tree-shaking导致把css摇树摇跑了，郁闷啊~~ webpack的tree-shaking就是在package.json的sideEffects进行设置，我当时就是设置为sideEffects:false的。 然后我将sideEffects设置为如下，问题就解
Vue项目打包问题（生产环境样式失效）
m0_49909696的博客
01-06 7484
Vue项目打包问题解决
webpack4 CSS Tree Shaking的使用
10-18
主要介绍了webpack4 CSS Tree Shaking的使用,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack开发环境和生产环境的深入理解
01-19
以前自己写一小项目时，webpack的配置基本就是一套配置，没有考虑生产环境和开发环境的区分，最近在做一个复杂的商城项目接触到了webpack的高级配置，经过两天的研究，写出了一份目前来说比叫满意的配置，在这里分享...
webpack 生产环境相关
weixin_44374938的博客
05-02 131
webpack生产环境配置就是当代码上线时保证可以正常运行。之前我我们提到的Babel，以及将css文件打包成单独文件的插件都是生产环境的配置。 一、CSS兼容性处理 1.安装 npm install postcss-loder postcss-preset-nev --save 2.文件配置 改配置必须在css-loader之前掉用 rules:[ { test:/\.css$/, use:[ .
webpack踩坑四：css处理
i'm cool 的博客
05-08 1155
一：提取css成单独文件 使用插件mini-css-extract-plugin，安装插件， 在webpack plugins配置中使用， 这里的filename配置项就是输出的css的名称 并且在使用css-loader之后，使用MiniCssExtractPlugin.loader,而不是使用style-loader。（loader解析都是自下而上，从左往右） 简单介绍下几个loader的意思： css-loader: 将css放到js中； style-loader: 创建style标签，将css
webpack坑
前端劝退工程师
08-18 3203
报错 CleanPlugin is not a constructor 原因 'clean-webpack-plugin’插件的引入方式变了 要解构引入 {CleanPlugin} = require('clean-webpack-plugin')
Webpack 5基础入门知识总结
weixin_43327181的博客
08-23 610
常用的loader以及plugins css-loader：将CSS转化为JS（将CSS输出到打包后的JS文件中） style-loader：把包含CSS内容的JS代码，挂载到页面的一、打包CSS文件 loader执行顺序：先右后左(先下后上) npm i -D css-loader style-loader wabpack.config.js中需要配置 1. 打包CSS举例 module : { rules : [ { test : /\.css$/i,
安装optimizer-css-assets-webpack-plugin时会报错
stardust_light的博客
08-15 468
安装optimizer-css-assets-webpack-plugin报错
webpack样式失效，打包生产环境，开启cssModule
weixin_30980795的博客
09-16 1107
webpack打包生产环境样式失效： 生产环境中，webapck把我的样式文件删掉了，原因在于tree-share 补补知识 tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。 新的 webpack 4 正式版本，扩展了这个检测能力，通过 package.json 的 “sideEffects” 属性作为标记，向 compiler 提供提示，表明项目
webpack优化构建速度示例-resolve.extensions:
最新发布
qq_36413371的博客
05-15 201
当项目不仅仅包含.js或.json文件，还包含其他类型文件(如.ts、.vue、.css)作为模块时，配置resolve.extensions可以不必要的文件搜索提高性能。可以看到优化resolve.extensions的顺序，简单的三个小模块的打包就带来了1508-1467=41ms的性能提升。
webpack5 .css样式图片路径找不到
09-09
当使用webpack5时，可能会出现在.css文件中的图片路径无法找到的问题。这是因为在webpack5中，引入图片的方式发生了变化。 在之前的版本中，我们可以直接在.css文件中使用相对路径来引入图片。但是在webpack5中，除非使用绝对路径，否则默认情况下无法正确解析路径。 解决这个问题的方法有两种： 1. 使用绝对路径：在.css文件中使用绝对路径来引入图片，可以确保路径的正确解析。例如，如果图片位于项目根目录下的img文件夹中，可以这样引入：background-image: url(/img/example.jpg); 2. 配置webpack的文件解析规则：在webpack的配置文件中，可以通过配置resolve.alias来解决路径问题。例如，如果图片位于项目根目录下的img文件夹中，可以这样配置resolve.alias： ```javascript module.exports = { //... resolve: { alias: { '@img': path.resolve(__dirname, 'img') } } }; ``` 然后在.css文件中使用别名来引入图片：background-image: url('@img/example.jpg'); 无论使用哪种方法，都需要确保图片路径的正确性。此外，还需要注意webpack5使用的是asset模块，需要在配置文件中正确设置相关的loader，以便正确处理图片文件。 总之，针对webpack5中.css样式图片路径找不到的问题，可以通过使用绝对路径或配置resolve.alias来解决。同时，确保正确配置相关的文件解析规则和loader，以便正确处理图片文件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值