html loader的作用,webpack认识loader的作用
举例:
如果希望在.html文件中使用style.css样式,我们以前只学习过一种方式:直接在.html中通过link的方式来引入 ,这是传统的做法,在webpack语境下,我们将选择一条不同的道路:在js文件中引入了css。
在入口文件中引入css会报错,这时候我们使用loader即可解决(它认为是在入口文件引入一个模块。(在webpack中一切皆模块))
*********************************************
步骤
在css中引入另一个css
然后在js(入口文件)中引入会报错
安装loader
npm i css-loader -D
开始引入:
打包成功
再次打包
它不会报错,但是,页面上也并没有出现样式的效果。检查打包之后得到的目标代码.js文件,发现其包含css代码。但是,它为什么不会显示在页面上呢?如果我们希望样式生效,最终在.html文件中有两种情况:
①有style标签
②有link标签
而css-loader只是允许你在.js中通过import来引入.css,如果你希望引入的css代码最终以style标签的方式插入到html页面中,则还需要安装一个loader:style-loader
安装并使用style-loader
npm i style-loader -D
最终结果:
html + js 可以有样式
他还会告诉你样式是在那个文件中出现的
这个js文件会自动给你加style(前边入口处的代码)
重点:注意这里容易报错,看仔细
引入less(记得css的也同样要引入)
在入口文件中引入less
一打包就错误
装包
npm i less-loader less -D
写配置
自动添加css样式前缀(写css样式会有兼容性问题,去看看)
https://www.caniuse.com/flexbox
可以在这个网站查兼容性的情况
红色不能用
灰色要加前缀
全背下来或者去查太慢了,所以我们可以使用loader来安装以来步骤
安装依赖
在modules中补充设置postcss-loader
单独设置postcss的autoprefixer插件
npm i postcss postcss-loader autoprefixer -D
内容不用记(官网固定写法){
test: /\.less$/,
// 匹配成功后(从后向前;从右到左)
// 1. 先用less-loader去加载.less文件,转成css
// 2. 用postcss-loader配合autoprofixer加浏览器前缀
// 3. 先用css-loader去加载css文件
// 4. 再用style-loader把样式以style标签的方式嵌入到html中
use:['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
}
在less中写兼容性的样式后
会自动给你加前缀
如果只想兼容ie10
注释掉其他的,只管ie10
6、file-loader-处理图片文件
解决方法:
build里多了两个文件
觉得这样不好,再添加一局代码
这样写,打包之后打开之后不显示
要注意:此时打包得到的图片的路径可能有问题,需要你把src下的index.html手动复制一份到目标文件夹,并同时修改引用的css,才能正确看到图片。(后面会改成自动去复制)
7、文件指纹
文件名_八位hash值加后缀名
8、url-loader处理图片
、
设置小于3k的转成base64,所以当我们发送请求的时候不需要在请求这个小文件,因为它已经被转成base64字节放到js里
9、使用babel-loader处理js降级问题
html loader的作用,webpack认识loader的作用相关推荐
- html loader使用方法,webpack中loader的使用方法,以及几个常用loader的应用小实例
loader:是webpack用来预处理模块的,在一个模块被引入之前,会预先使用loader处理模块的内容. 可能,你会遇到当你用webpack打包的时候,提示你需要一个loader来处理文件,那we ...
- css加载不起作用,webpack css loader不起作用
您好我正在尝试通过我的vue2js SPA中的webpack style-loader加载bootstrap css . 我用 npm install --save-dev css-loader 安装 ...
- vue ---- webpack中loader
loader 概述 在实际开发中,webpack默认只能打包处理以 .js 后缀名结尾的模块. 其他非 .js 后缀名结尾的模块,需要调用loader加载器才可以正常打包,否则会报错! lodaer ...
- vue-cli Webpack之Loader原理及自定义Loader
文章目录 1. Loader 分类与执行顺序 1.1 Loader 分类 1.2 Loader 执行顺序 1.3 使用Loader方式 1.3.1 内联 Loader 2. 开发 Loader 步骤 ...
- Webpack之Loader原理及自定义Loader
文章目录 1. Loader 分类与执行顺序 1.1 Loader 分类 1.2 Loader 执行顺序 1.3 使用Loader方式 1.3.1 内联 Loader 2. 开发 Loader 步骤 ...
- 24.重学webpack——loader的原理及常用loader的实现(高频面试题)
[重学webpack系列--webpack5.0] 1-15节主要讲webpack的使用,当然,建议结合<webpack学完这些就够了>一起学习. 从本节开始,专攻webpack原理,只有 ...
- Loader 入门【Webpack Book 翻译】
原文链接:https://survivejs.com/webpack... 翻译计划:https://segmentfault.com/a/11... 附言:因为发现书中一些内容单独放出来会比较尴尬, ...
- webpack之 loader
开篇 loader不难,loader不难,loader不难.默念三遍,然后开始. loader 简介 loader 这个东西配置 webpack 的时候经常用到,刚开始会让人觉得有一种神秘感. 看了文 ...
- webpack的loader与plugin原理
文章目录 loader原理 loader执行顺序 loader使用方式 loader的实现 参数 同步loader 异步loader Raw loader Pitching loader loader ...
最新文章
- JAVA基础中容易踩坑的知识点
- 莱斯信道衰落下的QPSK误码率分析
- [原创]java WEB学习笔记94:Hibernate学习之路---session 的管理,Session 对象的生命周期与本地线程绑定...
- redis 和 数据库mysql之间的关系
- 分析及解决SQLServer死锁问题
- 美国网络安全体系架构揭秘
- jQuery事件命名空间多事件绑定自定义事件js 命名空间 javascript命名空间
- springboot基于Javaweb的超市管理系统毕业设计源码281024
- Windows下DOS操作系统(cmd)详解
- 阿里云Maven配置方案
- 解密PDF---不支持双面打印打印机-------->双面打印操作
- 用python计算圆环面积公式_圆环的计算公式,一看就懂的
- 唱歌气沉丹田怎么做 气沉丹田的口诀
- 少男杀手dodolook签约酷6网原创红人阵营
- 配置web.xml文件时报The word ‘***‘ is not correctly spelled的解决方案
- 六年软件测试感悟 从博彦到VMware
- win10 关闭自动维护计划任务
- 【Java基础】二、大厂都开始重视的基础很重要吗?快来加入基础的学习,巩固一下细枝末角,刷刷面试题吧
- C++中typeid的使用
- OR-CAD CAPTURE学习笔记——ERROR(ORCAP-11010)
热门文章
- MySQL报错113_mysql 2003 (113)
- zabbix mysql设置中文乱码_解决zabbix监控因php问题导致图形界面中文乱码方法
- 1555C. Coin Rows
- android 复制字符串,Cocos2dx 复制文本到剪切板(Android 和 ios)
- java一般做什么_java开发一般做什么
- 如何在UE4中创建线程
- 安卓工控主板运行时会自动重启_工控主板在工业自动化中的应用
- 抖音最强python_装逼篇 | 抖音超火的九宫格视频是如何生成的,Python 告诉你答案...
- 【转】开机出现 error:file “/boot/grub/i386-pc/normal.mod“ not found 错误提示
- 【转】C++中的static_cast ,reinterpret_cast的用法和区别