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

最新推荐文章于 2023-10-21 08:38:58 发布
最新推荐文章于 2023-10-21 08:38:58 发布
阅读量297 收藏 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
    评论
基于vuejs+webpack的日期选择插件
10-21
<input type="text" @click="showCalendar" v-model="value" placeholder="请输入日期"> <calendar :show.sync="show" :value.sync="value" :x="x" :y="y" :begin="begin" :end="end" :range="range"> ``` 2. **...
vue入门 webpack+loader \vue-cli
04-17
<input type="text" v-model="msg"> {{ msg }} var c = new Vue({ el: '#box', data: { msg: 'welcome vue' } }); ``` ##### 6.3 事件处理 Vue.js 支持添加事件监听器来响应用户的交互行为。 - ...
webpack-输入输出和插件配置
lxs19930928的博客
12-12 735
一： 输入和输出配置以及模式配置 图例文件 (1): webpack.config.js配置 // webpack是基于node,所以使用module.exports const path = require("path") module.exports = { // 入口 出口 loader plugin entry: './src/index.js', mode: 'development', // 指定模式，默认是生产模式，开发模式便于查看代码 output: { path
Webpack & 理解 input & output 概念
最新发布
cookcyq__的博客
10-21 498
如果还没用过 Webpack 请先阅读再回头看本文。Webpack 的核心只做两件事，输入管理（Input Management）和输出管理（Output Management），什么花里胡哨的插件和配置都离不开这俩概念，带着俩概念去看文档我相信你会有所收获，而不再被密密麻麻的配置搞得云里雾里。
新手小白webpack5.0入门笔记 ，5000字长文解释webpack相关概念和运用举例。
weixin_44717047的博客
06-21 325
新手小白webpack入门笔记 ，5000字长文解释webpack相关概念和运用举例。
input框改变type属性
weixin_30877227的博客
09-08 140
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 150
欢迎大家前往云+社区，获取更多腾讯海量技术实践干货哦~ 作者介绍：陈柏信，腾讯前端开发，目前主要负责手Q游戏中心业务开发，以及项目相关的技术升级、架构优化等工作。 前言 webpack 是一个强大的模块打包工具，之所以强大的一个原因在于它拥有灵活、丰富的插件机制。但是 webpack 的文档不太友好，就我自己的学习经历来说，官方的文档并不...
基于Vue.js的表格分页组件
12-28
一、Vue.js简介 1、Vue的主要特点： （1） 简洁 （2） 轻量 （3）快速 （4） 数据驱动 ...input type=text ng-model=note> </body> // js var myModule = angular.module('myApp', []); myModule.controll
更好的键盘：用于移动设备的js键盘组件
02-05
script type =" text/javascript " src =" jkeyboard.js " > </ script > < script type =" text/javascript " > var keyboard = new JKeyboard ( { onInput : function ( key , rs ) { // do ...
Vue的实例、生命周期与Vue脚手架（vue-cli）实例详解
11-27
<input type="text" v-model="message"> ``` Vue实例还提供了许多有用的实例属性和方法，如`$data`（访问数据对象）、`$el`（访问挂载的DOM元素）和`$watch`（监听数据变化并执行回调）。`$watch`方法常用于当某个...
Web基础：HTML的基础标签（二）
m0_73058235的博客
12-28 725
上一篇文章已经为大家讲述了部分HTML的标签，此篇将会为大家讲述剩下的基础标签。
[Webpack]webpack学习之旅（第三天）
weixin_30363509的博客
02-11 110
webpack行程 1.第一天：webpack安装与基本使用 2. 第二天：如何处理各种格式的文件 3. 第三天：如何生成自定义Html文件 4. 第四天：如何实现开发模式下的配置 5. 第五天：如何实现第三方插件的引入 6. 第六天：如何提取公用代码同时减少冗余代码 7. 第七天：研究vue-cli脚手架源码 第三天：如何生成自定义Html文件 webpack学习之旅...
Webpack之插件html webpack plugin
YunWisdom
02-22 548
Webpack之插件html webpack plugin html-webpack-plugin插件 动态生成html文件并自动引入js文件 静态文件无需加载js或css文件，通过设置入口文件可以将js文件自动添加进去，而相关的css文件在js中导入 同时修改生成的js文件命名规则，利用hash码命名js文件 没有改动时可以让浏览器缓存内容，当有改动重新部署...
Webpack打包实用优化方案
大灰狼的小绵羊哥哥的博客
08-10 9659
转载http://jdc.jd.com/archives/212653 简介: Webpack是当下最热门的前端资源模块化管理和打包工具。如何提升打包效率，成为了大家关注的点之一。下文将分享我们开发到上线的实用优化方案。 目前最火的打包工具莫过于 Webpack 了，关于 Webpack 的优化方案，网上有很多文章可以供大家参考。查阅前人的资料，总结自己在项目中遇到的问题，最终得出一些比较实用...
前端的工程化和自动化
still_relive的博客
04-24 1588
前端的工程化和自动化七、webpack---优雅降级 babel使用: ES6->ES5 tracuer babel 低版本： npm install babel-loader babel-core babel-preset-es2015 -D 高版本： npm install babel-loader@8.0.4 @babel/core @babel/preset-env...
Webpack 常见静态资源处理 - 模块加载器（Loaders）+ExtractTextPlugin插件
weixin_30877227的博客
09-01 311
Webpack 常见静态资源处理 - 模块加载器（Loaders）+ExtractTextPlugin插件 webpack系列目录 webpack 系列 一：模块系统的演进 webpack 系列 二：webpack 介绍&安装 webpack 系列 三：webpack 如何集成第三方js库 webpack 系列 四：webpack 多页面支持 & 公共组件单独打包 webpack...
webpack4.x深入与实践
snow_small的博客
03-27 1万+
一、什么是webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求...
Webpack常用插件总结
qq_39040042的博客
02-28 8630
刚完成一个基于React+Webpack的项目，渐渐地熟悉了Webpack的一些配置，开发过程中用到了不少Webpack插件，现在把觉得有用的Webpack插件总结一下当巩固学习啦，主要涉及热模块替换[Hot Module Replacement]、ProvidePlugin、CommonsChunkPlugin、UglifyJsPlugin 、ExtractTextWebpackPlugin、DefinePlugin、DllPlugin等。
webpack的extract-text-webpack-plugin插件
热门推荐
老夫风清扬的博客
03-12 2万+
今天要和大家分享的webpack的插件extract-text-webpack-plugin。我们先聊聊webpack的一个打包机制，webpack本来只能能打包处理.js文件，但是通过强大的loader之后，可以打包处理各种类型的文件。比如：.css文件等。 表面上webpack通过loader可以打包各种文件了，已经完美了。但是在某些场景中也存在着问题的，比如我们的css的内容都被打包到bun...
vue的input框的关键词搜索
06-11
要实现vue的input框的关键词搜索，可以使用Vue的计算属性和v-for指令来实现。 首先，在组件中定义一个data属性，用于存储关键词列表和用户输入的关键词： ``` <template> <div> <input type="text" v-model="keyword" /> <ul> <li v-for="item in filteredList">{{ item }}</li> </ul> </div> </template> <script> export default { data() { return { keyword: '', keywordList: ['Vue', 'React', 'Angular', 'Webpack', 'Babel', 'Node.js', 'TypeScript', 'JavaScript'] } }, computed: { filteredList() { // 使用Vue的计算属性来实现关键词搜索 return this.keywordList.filter(keyword => keyword.toLowerCase().indexOf(this.keyword.toLowerCase()) !== -1); } } } </script> ``` 在上述代码中，我们使用了Vue的计算属性来实现关键词搜索，计算属性的名称为filteredList，它是根据用户输入的关键词来过滤关键词列表得到的结果。在模板中，我们使用v-for指令来遍历filteredList，将过滤后的关键词列表以列表的形式呈现在页面上。 需要注意的是，在计算属性中，我们使用了Array的filter方法来过滤关键词列表，根据用户输入的关键词来返回匹配的关键词列表。同时，为了避免大小写敏感，我们将关键词和用户输入的关键词都转换为小写字母再进行比较。 这样，当用户在输入框中输入关键词时，会实时根据关键词列表过滤出匹配的关键词，并将匹配的关键词以列表的形式呈现在页面上。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值