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
  • lessless核心

配置文件

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

以兼容到ie9chrome35版本为例,配置好后,执行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等相关推荐

  1. 复习webpack的常用loader

    今天复习了下webpack的常用loaders,其实习惯ES6开发的话,webpack的config.js基础配置应该是比较固定: 首先是JS,我们ES6要转为ES5,需要用到babel转码: 1. ...

  2. 如何用纯 CSS 创作一个文本淡入淡出的 loader 动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ERwpeG 可交互视频 ...

  3. webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

  4. webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server - QxQstar - 博客园

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

  5. react+webpack项目常用的插件(plugins)

    一.HtmlWebpackPlugin使用: npm install html-webpack-plugin --save-dev 解释:这个插件是简化创建生成html(h5)文件用的,如果你引入的文 ...

  6. webpack使用css-loader跟style-loader加载css报错

    webpack使用css-loader跟style-loader加载css报错 webpack使用css-loader跟style-loader加载css报错 webpack.config.js 配置 ...

  7. vue 组件不受全局样式影响_组件库引入全局样式lib/style/index.css,会污染全局基础样式...

    I have searched the issues of this repository and believe that this is not a duplicate. Version 1.3. ...

  8. 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创建的项目,在项目 ...

  9. webpack打包样式资源_使用loader去打包css文件_打包less文件---webpack工作笔记004

    然后我们再来看看,怎么用webpack打包css资源文件, 因为我们知道webpack可以直接处理js,json文件,但是不能直接处理css文件,img文件对吧.. 我们现在,通过webpack的组件 ...

最新文章

  1. zabbix-agent 启动不起来
  2. 坐标下降+随机梯度下降
  3. Centos7下,简单DOCKER 使用.映射SSH端口到宿主主机.
  4. 【转】搭建Java版WebService
  5. 他不怕被拒绝_【保险知识】高情商保险营销,再也不怕被拒绝!
  6. 经典公开课、好的学习网站
  7. python换行符号长度_创建带换行符的可调整大小/多行Tkinter/ttk标签
  8. 4.企业应用架构模式 --- Web表现层
  9. 20191114每日一句
  10. linux内核 header.s,arm架构的linux内核中,clrex指令的作用是什么
  11. 操作系统的起源与发展历程
  12. Linux_无法运行可执行文件
  13. 我用Python分析1585家电商车厘子销售数据,发现这些秘密
  14. 【C++】输出公元1900-2100年之间所有闰年的年号,每5个一行
  15. 2021-2027全球与中国核磁共振管市场现状及未来发展趋势
  16. 云函数能写php吗,FunctionCloud
  17. 计算机上根号是哪一个,电脑上怎么哪个键是数学中的开根号啊
  18. 第三方支付躺赚的好日子结束:银行直连模式瓦解
  19. 使用 matplotlib绘制简单图形,保存图片的方法
  20. 梦幻西游热门服务器卡顿延迟,梦幻西游:周末活动卡顿的最总原因,是人真的多还是服务器问题?...

热门文章

  1. 微云二手车运营版 公众号+小程序v1.1.20+微信小程序+抖音端源码安装教程
  2. git have diverged
  3. 关于Marshal 类的整理
  4. box2d 碰撞检测_谁动了我的刚体——Box2D碰撞检测
  5. Python数据相关性分析实践记录
  6. 汽车市场的16nm FPGA
  7. shmget()函数:
  8. JavaScript 迭代器 迭代对象
  9. android调用百度地图实现地理围栏
  10. 无线网破解软件|一键式破解无线网|BT17软件包下载[笔记本+软件就行]