webpack如何处理type=‘text‘的input标签

最新推荐文章于 2023-10-21 08:38:58 发布
最新推荐文章于 2023-10-21 08:38:58 发布
阅读量285 收藏 2
点赞数 2
文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44607531/article/details/113790872
版权

自己写了一些css样式，经由webpack处理之后发现有一个输入框的效果消失了
在这里插入图片描述

找到打包后的index.html文件，搜索input 发现type='text’消失了（其他的type是肯定不会删除的）
在这里插入图片描述

而我的css样式使用了属性选择器，它把属性删了，理所应当的效果会消失。
在这里插入图片描述

结论
webpack会删除type='text’的input标签的type属性。所以使用webpack时，css及js文件中避免使用type='text’的属性选择器

无聊人_
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
webpack-输入输出和插件配置
lxs19930928的博客
12-12 718
一： 输入和输出配置以及模式配置 图例文件 (1): webpack.config.js配置 // webpack是基于node,所以使用module.exports const path = require("path") module.exports = { // 入口 出口 loader plugin entry: './src/index.js', mode: 'development', // 指定模式，默认是生产模式，开发模式便于查看代码 output: { path
新手小白webpack5.0入门笔记 ，5000字长文解释webpack相关概念和运用举例。
weixin_44717047的博客
06-21 314
新手小白webpack入门笔记 ，5000字长文解释webpack相关概念和运用举例。
input框改变type属性
weixin_30877227的博客
09-08 136
1、HTML部分 <input name="password" type="password" id="pass" placeholder="密码"/> <button>显示密码</button> 2.JS部分 $('button').on('click',function(){ //必须用原生JS var pass = ...
玩转webpack（二）：webpack的核心对象
weixin_34050427的博客
02-08 137
欢迎大家前往云+社区，获取更多腾讯海量技术实践干货哦~ 作者介绍：陈柏信，腾讯前端开发，目前主要负责手Q游戏中心业务开发，以及项目相关的技术升级、架构优化等工作。 前言 webpack 是一个强大的模块打包工具，之所以强大的一个原因在于它拥有灵活、丰富的插件机制。但是 webpack 的文档不太友好，就我自己的学习经历来说，官方的文档并不...
Webpack之插件html webpack plugin
YunWisdom
02-22 521
Webpack之插件html webpack plugin html-webpack-plugin插件 动态生成html文件并自动引入js文件 静态文件无需加载js或css文件，通过设置入口文件可以将js文件自动添加进去，而相关的css文件在js中导入 同时修改生成的js文件命名规则，利用hash码命名js文件 没有改动时可以让浏览器缓存内容，当有改动重新部署...
webpack 处理CSS资源的实现
10-16
主要介绍了webpack 处理CSS资源的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
webpack_vue_template:webpack + vue =项目模板
05-09
Webapck4 + Vue模板 开发命令行 # serve with hot reload at localhost:3000 npm run start 生产命令行 # build for production with minification npm run build 其他命令行 ...npm run storybook
webpack4 处理SCSS的方法示例
10-18
主要介绍了webpack4处理SCSS的方法示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅谈webpack对样式的处理
08-28
主要介绍了浅谈webpack对样式的处理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack4 处理CSS的方法示例
10-18
主要介绍了webpack4 处理CSS的方法示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Webpack & 理解 input & output 概念
最新发布
cookcyq__的博客
10-21 482
如果还没用过 Webpack 请先阅读再回头看本文。Webpack 的核心只做两件事，输入管理（Input Management）和输出管理（Output Management），什么花里胡哨的插件和配置都离不开这俩概念，带着俩概念去看文档我相信你会有所收获，而不再被密密麻麻的配置搞得云里雾里。
webpack的extract-text-webpack-plugin插件
热门推荐
老夫风清扬的博客
03-12 2万+
今天要和大家分享的webpack的插件extract-text-webpack-plugin。我们先聊聊webpack的一个打包机制，webpack本来只能能打包处理.js文件，但是通过强大的loader之后，可以打包处理各种类型的文件。比如：.css文件等。 表面上webpack通过loader可以打包各种文件了，已经完美了。但是在某些场景中也存在着问题的，比如我们的css的内容都被打包到bun...
webpack(7)_CSS_使用extract-text-webpack-plugin提取css
renzhongrui的博客
08-05 6301
webpack(7)CSS提取css
input type 介绍
田军的专栏
11-19 1324
Input表示Form表单中的一种输入对象，其又随Type类型的不同而分文本输入框，密码输入框，单选/复选框，提交/重置按钮等，下面一一介绍。1，type=text 输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。当然这也是Input的 默认类型。 参数name：同样是表示的该文本输入框名称。 参数size：输入框的...
Webpack 5 超详细解读（一）
5coder的大前端进阶之路-个人博客网站：blog.5coder.cn
11-21 915
需要有一个工具站出来解决问题，可以让开发者在入口的地方随心所欲，用个人喜欢的技术栈完成开发，从而不需要关系过程，但是最终的结果可以在浏览器上正常展示，因此这里就会用到打包工具。回到初始思路上，我们需要less-loader将less文件编译为css文件，其次使用css-loader搭配style-loader，将css样式编译至html文件中，所以需要进行配置，配置思路与css相同。伴随着AJAX的诞生，前端的工作模式也发生了很大变化，前端不仅仅是展示界面，而且还可以管理数据以及和用户进行数据的交互。
vue-cli webpack 打包后 index.html文件 引用缺少引号
superKM的博客
12-06 2502
webpack 打包后 打开index.html文件 发现引用文件的引号都被过滤了 &lt;script type=text/javascript src=./static/js/js/app.js&gt;&lt;/script&gt; 因此，需要在webpack.prod.conf.js 找到minify参数 讲 removeAttributeQuotes: true 改为  remov...
踩坑系列：webpack打包后，css文件样式都消失了
小锋QQmm~~的香蕉乐园
10-21 4366
我在查看webpack文档学习的时候，发现打包后css文件及样式都没有了，但是一开始学习的时候没有这个问题的。 经过一番排查发现有一个坑，就是当webpack.config.js里面的mode为production时，如果webpack设置了tree-shaking导致把css摇树摇跑了，郁闷啊~~ webpack的tree-shaking就是在package.json的sideEffects进行设置，我当时就是设置为sideEffects:false的。 然后我将sideEffects设置为如下，问题就解
webpack5 配置 13(性能优化)Tree shaking Http压缩 html压缩， runtime压缩， 封装library
lin_fightin的博客
04-11 1000
Tree shaking 树摇晃，比如一颗树上的果子已经成熟了，那么他就不需要在树上了，摇晃着下来，树也会变得简洁。代码的话，比如一些代码如函数，定义后但是没有用到，那么这个代码就不会被打包。 Tree shaking,计算机表示消除dead-code。用于消除未调用的代码，因为纯函数无副作用，所以可以放心消除，这也是为什么要尽量使用纯函数进行编程。 Js中的Tree shaking 主要是源自rollup工具。 这是因为Tree shaking是依赖于ES MODULE的，因为ES module是静态分析
webpack（二）--继续说说webpack输入和输出
星环
04-28 516
webpack的entry和output(输入、输出) 分清楚output中的 publicPath path filename
webpack 处理 icon
04-04
Webpack 可以使用 file-loader 或 url-loader 来处理 icon 文件。 file-loader 会将 icon 文件复制到输出目录，并返回文件路径，可以在代码中使用该路径引用 icon 文件。 url-loader 则会将 icon 文件转换为 base64 编码，直接嵌入到生成的 JavaScript 文件中，可以直接在代码中使用。 以下是使用 file-loader 的示例： 1. 安装 file-loader： ``` npm install file-loader --save-dev ``` 2. 在 webpack 配置文件中添加 loader： ```javascript module.exports = { // ... module: { rules: [ { test: /\.(png|svg|jpg|jpeg|gif)$/i, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'images', }, }, ], }, ], }, }; ``` 3. 在代码中使用 icon 文件： ```javascript import icon from './icon.png'; const img = document.createElement('img'); img.src = icon; document.body.appendChild(img); ``` 以上示例中，file-loader 会将 icon.png 复制到输出目录的 images 文件夹下，并返回路径 images/icon.png。在代码中使用该路径引用 icon 文件。 可以通过配置 name 和 outputPath 选项来控制文件名和输出路径。 使用 url-loader 也类似，只需将 file-loader 替换为 url-loader 即可。需要注意的是，url-loader 可以根据文件大小选择是嵌入还是输出文件。可以通过配置 options.limit 来控制文件大小的阈值。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值