如果我们想要在webpack中进行打包的话,我们就需要在入口的图形结构中添加依赖,但是
这里的css并不会跟着一块打包,而是会报错,因为webpack只能对于js进行打包的操作,如
果想进行一些特殊的打包,就需要响应的loader了
这里是"需要一个合适的loader"来处理这样的一个文件
这里css文件也需要加载一个loader 加载模块
css-loader
loader 可以对于源代码进行一个转换
加载的时候,webpack不知道对于这个模块进行怎样的处理,就需要使用loader来对于
模块进行加载
其实webpack对于代码的处理也不是特别的好,需要使用babel-loader来进行处理
对于加载css文件来说需要使用 css-loader
npm install css-loader -D 进行一个安装
-D 其实是 --save-dev的缩写,是在开发阶段
将 install 缩写成 i
现在就可以通过css-loader来处理css文件
在导入路径前面加上css-loader!...路径
当然光有css-loader是不行的,在页面上显示一个标签
在命令里写上 --module-bind="css=css-loader!"
这个使用CLi的方式进行处理,这个文档里面的东西没有进行实时的更新
这个选项是不认识的
Cli 使用命令行的接口
webpack5不再支持这样的使用
应该使用配置文件的方式来进行webpack打包的配置
这里会经过一种通俗易懂的方式来进行loader的配置
我们可以在里面写上很多的配置信息
默认是 webpack.config.js文件中添加一个
module.rules中允许配置多个loader(我们也会使用很多的loader来完成其他的加载)
这个module的属性对应的是另外的一个对象
rules 规则
这个是一个数组
rules:[]
这种配置的方式是更加方便我们阅读的
rules 对象的就是一个数组
里面存放的是一个一个的对象
rules对象
最常用的属性 { test: //匹配的对象,/ /.css$/ loader:'css-loader' }
真正设置的使用这样的一种写法
里面也可以传递一些参数
use:[ {loader:'css-loader',options:{}} ]
options 是一个可选的属性,值是一个字符串或者是一个对象,值会被传入loader里面的
以后学习怎么使用自己造的属性
query 已经被options进行替代了
这里是一个简写模式,在加载的时候会将
css-loader 转化成 loader:"css-loader"
它们是一样的
如果这里只有一个loader的话,就可以这样来写
loader:'css-loader',最完整的写法就是这样的一种写法
webpack中loader的使用配置的规则
modules:[ rules:[
] ]
如果在这里没有插入到页面里面的话是不会显示的
如果我们这里想要写less 等的话,就需要写4个loader
每个loader都会讲解清楚
通过js来创建一个style的标签,然后将css加载到style标签中
对于webpack中的配置就比较清晰了
课程中会讲到很多的细节
配置了一下css-loader,加载css的规则
对于一个项目进行一个打包
对于文件会进行一个自动的刷新
样式没有显示到页面上面,缺少了一个style标签
在页面中进行一个刷新的操作
有三种样式: 1 行内样式 2 业内样式 3 外部样式 .css文件
需要将里面的文件进行一个打包的操作
css-loader 只是负责加载css文件,并不会把解析之后的内容插入到页面里面
就是style-loader
我们将插入页面里的东西交给style-loader来进行处理
使用另外一个loader来进行处理
注意编写的顺序: 从下到上依次加载
如何处理less 文件
在这里的时候再来讲一个东西
我们想要在这里使用less sass stylus 的预处理器来编写css样式,效率会非常的高
在开发过程中,浏览器的兼容性问题,我们应该怎么样去处理和解决
不是说浏览器大小变化
不同的浏览器支持的特性是不一样的,比如说css 特性,js语法,之间的兼容性
有一些浏览器支持,有一些浏览器不支持
现在已经有工具自动帮助进行处理了
前端已经非常的工程化了,不一定这里的浏览器全部都支持
user-select : none;
这个是不现实的,已经有一些工具可以自动帮助加浏览器的前缀
不一定要加 autoprefiexer
babel 不一定要加上babel 来进行代码的转换
这里的项目是否是支持的,很多的浏览器是不支持的
ie11 - ie8
其实是一个一个的条件,就是提供给工具的,告诉这些工具我现在到底是要适配什么工具
output babel 市场占有率
caniuse 统计浏览器的市场占有率
UC浏览器的市场占有率也是非常高的
设置完这个条件的时候,会被很多的浏览器进行使用的
市场要进行兼容浏览器,后面的postcss-prest-env
babel
autoprefixer 也要进行使用
通过这个配置来共享这个配置
在多个前端之间进行数据的共享
共享目标浏览器和node.js的版本
通过共享来转换成结果
当这里的条件判定成死亡了
浏览器器支持的的下一个效果
是通过这个工具来进行查询的
caniuse-lite的工具,这个工具的数据来自于caniuse的网站上
在Vue中适配的就是这些浏览器
npx browserslist ">1%,last 2 version,not dead"
使用命令可配置的文件,所以可以在这里使用这样的一种工具
其实这样是在命令行中使用的,真实开发中是在配置里面使用的
让别人共享配置文件
,号是做了一个并集 在中间选择一个就可以了 使用and 表示两个必须同时满足 使用or跟,一样或者的意思 not 就是进行条件的取反 根据具体的条件来设置就可以了
第一种是可以在package.json里面写
在里面写好以后,babel 等等工具会在里面自动来进行查询,根据条件进行查询
第一种是在配置文件package.json中写
第二种是在另外的配置文件中写
babel 工具在进行解析的时候会根据条件选择是否来进行添加
在脚手架中就会这样的一个文件来进行配置
这里的两个都是可以写的,在开发中都是可以使用的
来进行项目的匹配
在canuise进行查询
