webpack最常用的loader:style-loader、css-loader、less-loader、postcss-loader、babel-loader等
style-loader、css-loader
less-loader
postcss-loader
bable-loader
style-loader、css-loader
我们在webpack中使用css,当我们npm run build :dev打包的使用,会报错,因为webpack默认的状态下只能识别js,不能识别css,所以就需要安装loader来帮助我们去解析css文件进行打包
npm i style-loader css-loader -D
- style-loader: 把解析后的css代码从js中抽离,放到头部的style标签中(在运行时做的)
- css-loader: 解析css文件代码
配置文件
module.exports = {//...module: {rules: [{test: /.css$/,//注意webpack的使用的顺序是按照从右像左的所以先使用css去识别css文件,然后在把css提取出来放到,头部的style里面use: ['style-loader', 'css-loader'],},],},
};
less-loader
项目开发中,为了更好的提升开发体验,一般会使用css超集less或者scss,对于这些超集也需要对应的loader来识别解析。以less为例,需要安装依赖:
npm i less-loader less -D
- less-loader: 解析less文件代码,把less编译为css
- less: less核心
配置文件
module.exports = {//...module: {rules: [{test: /.css$/,//注意webpack的使用的顺序是按照从右像左的所以先使用css去识别css文件,然后在把css提取出来放到,头部的style里面use: ['style-loader', 'css-loader'],},{test:/.less$/,use:['style-loader', 'css-loader','less-loader']},],},
};
postcss-loader
虽然css3现在浏览器支持率已经很高了, 但有时候需要兼容一些低版本浏览器,需要给css3加前缀,可以借助插件来自动加前缀, postcss-loader就是来给css3加浏览器前缀的
npm i postcss-loader autoprefixed -D
- postcss-loader:处理css时自动加前缀
- autoprefixer:决定添加哪些浏览器前缀到css中
module.exports = {//...module: {rules: [{test: /.css$/,//注意webpack的使用的顺序是按照从右像左的所以先使用css去识别css文件,然后在把css提取出来放到,头部的style里面use: ['style-loader', 'css-loader'],},{test: /.less$/,use: ['style-loader','css-loader',//新增{loader: 'postcss-loader',options: {postcssOptions: {plugins: ['autoprefixed'],},},},'less-loader',],},],},
};
配置完成后,需要有一份要兼容浏览器的清单,让postcss-loader知道要加哪些浏览器的前缀,在根目录创建 .browserslistrc文件
# 换行相当于 and
last 2 versions # 回退两个浏览器版本
> 0.5% # 全球超过0.5%人使用的浏览器,可以通过 caniuse.com 查看不同浏览器不同版本占有率
IE 10 # 兼容IE 105
以兼容到ie9和chrome35版本为例,配置好后,执行npm run build:dev打包,可以看到打包后的css文件已经加上了ie和谷歌内核的前缀
bable-loader
我相信都懂bable是干嘛的,偷个懒
安装依赖
由于webpack默认只能识别js文件,不能识别jsx语法,需要配置loader的预设预设 @babel/preset-typescript 来先ts语法转换为 js 语法,再借助预设 @babel/preset-react 来识别jsx语法。
npm i babel-loader @babel/core @babel/preset-react @babel/preset-typescript -D
module.exports = {// ...module: {rules: [{test: /.(ts|tsx)$/, // 匹配.ts, tsx文件use: {loader: 'babel-loader',options: {// 预设执行顺序由右往左,所以先处理ts,再处理jsxpresets: ['@babel/preset-react','@babel/preset-typescript']}}}]}
}
babel设置js兼容问题
npm i babel-loader @babel/core @babel/preset-env core-js -D
- babel-loader: 使用 babel 加载最新js代码并将其转换为 ES5(上面已经安装过)
- @babel/corer: babel 编译的核心包
- @babel/preset-env: babel 编译的预设,可以转换目前最新的js标准语法
- core-js: 使用低版本js语法模拟高版本的库,也就是垫片
module.exports = {// ...module: {rules: [{test: /.(ts|tsx)$/,use: {loader: 'babel-loader',options: {// 执行顺序由右往左,所以先处理ts,再处理jsx,最后再试一下babel转换为低版本语法presets: [["@babel/preset-env",{// 设置兼容目标浏览器版本,这里可以不写,babel-loader会自动寻找上面配置好的文件.browserslistrc// "targets": {// "chrome": 35,// "ie": 9// },"useBuiltIns": "usage", // 根据配置的浏览器兼容,以及代码中使用到的api进行引入polyfill按需添加"corejs": 3, // 配置使用core-js低版本}],'@babel/preset-react','@babel/preset-typescript']}}}]}
}
webpack最常用的loader:style-loader、css-loader、less-loader、postcss-loader、babel-loader等相关推荐
- 复习webpack的常用loader
今天复习了下webpack的常用loaders,其实习惯ES6开发的话,webpack的config.js基础配置应该是比较固定: 首先是JS,我们ES6要转为ES5,需要用到babel转码: 1. ...
- 如何用纯 CSS 创作一个文本淡入淡出的 loader 动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ERwpeG 可交互视频 ...
- webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
- webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server - QxQstar - 博客园
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
- react+webpack项目常用的插件(plugins)
一.HtmlWebpackPlugin使用: npm install html-webpack-plugin --save-dev 解释:这个插件是简化创建生成html(h5)文件用的,如果你引入的文 ...
- webpack使用css-loader跟style-loader加载css报错
webpack使用css-loader跟style-loader加载css报错 webpack使用css-loader跟style-loader加载css报错 webpack.config.js 配置 ...
- vue 组件不受全局样式影响_组件库引入全局样式lib/style/index.css,会污染全局基础样式...
I have searched the issues of this repository and believe that this is not a duplicate. Version 1.3. ...
- Vue3+vite配置postcss-pxtorem报错[plugin:vite:css] Failed to load PostCss config
1.安装依赖 npm install postcss-pxtorem -D 2.设置规则(更改postcss.config.js,该文件为使用vue-cli3自动创建的文件,vite创建的项目,在项目 ...
- webpack打包样式资源_使用loader去打包css文件_打包less文件---webpack工作笔记004
然后我们再来看看,怎么用webpack打包css资源文件, 因为我们知道webpack可以直接处理js,json文件,但是不能直接处理css文件,img文件对吧.. 我们现在,通过webpack的组件 ...
最新文章
- zabbix-agent 启动不起来
- 坐标下降+随机梯度下降
- Centos7下,简单DOCKER 使用.映射SSH端口到宿主主机.
- 【转】搭建Java版WebService
- 他不怕被拒绝_【保险知识】高情商保险营销,再也不怕被拒绝!
- 经典公开课、好的学习网站
- python换行符号长度_创建带换行符的可调整大小/多行Tkinter/ttk标签
- 4.企业应用架构模式 --- Web表现层
- 20191114每日一句
- linux内核 header.s,arm架构的linux内核中,clrex指令的作用是什么
- 操作系统的起源与发展历程
- Linux_无法运行可执行文件
- 我用Python分析1585家电商车厘子销售数据,发现这些秘密
- 【C++】输出公元1900-2100年之间所有闰年的年号,每5个一行
- 2021-2027全球与中国核磁共振管市场现状及未来发展趋势
- 云函数能写php吗,FunctionCloud
- 计算机上根号是哪一个,电脑上怎么哪个键是数学中的开根号啊
- 第三方支付躺赚的好日子结束:银行直连模式瓦解
- 使用 matplotlib绘制简单图形,保存图片的方法
- 梦幻西游热门服务器卡顿延迟,梦幻西游:周末活动卡顿的最总原因,是人真的多还是服务器问题?...