webpack4是如何处理css的
这篇文章主要介绍“webpack4是如何处理css的”,在日常操作中,相信很多人在webpack4是如何处理css的问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”webpack4是如何处理css的”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
旌德ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联建站的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18980820575(备注:SSL证书合作)期待与您的合作!
前言:webpack 处理css是一个很基础的话题。只是在webpack4 里,用autoprefixer解决css 的浏览器的兼容性时,会有个和以前不一样的坑。所以就再详细的写一下这方面的知识。
一,所需依赖
style-loader:将css 文件注入到html 页面的style 标签中。参考:https://www.webpackjs.com/loa...
css-loader:解析import 到js 里的css 文件。参考: https://www.webpackjs.com/loa...
less-loader:解析css 预处理语言,若使用的是其它的预处理语言,就要使用与其对应的loader。参考: https://www.html.cn/doc/webpa...
postcss-loader:对我们在项目中写完的css 进行后期处理:
把 CSS 解析成 JavaScript 可以操作的抽象语法树结构(Abstract Syntax Tree,AST),
调用插件来处理 AST 并得到结果。
autoprefixer:postcss-loader的插件,为css 加前缀,以适应不同浏览器。
注:postcss-loader的作用就像影视后期一样,把所有的原始文件合在一起,然后用插件加上特效,最后输出成品。autoprefixer 插件就对postcss-loader 解析出的AST 进行后期加工。
二,安装依赖
npm install --save-dev less-loader less style-loader css-loader postcss-loader autoprefixer
三,建立less 测试文件 style.less
#world{ display: flex; }
四,在主文件index.js 中导入style.less
import './style.less';
五,webpack配置文件 webpack.config.js
module: { rules: [ { test: /\.less$/, use: [ 'style-loader', {loader: 'css-loader', options: { importLoaders: 1 } }, 'less-loader', 'postcss-loader' ] }, ] }
css-loader的 importLoaders: 1,是一个很重要的设置。这会让所有解析完成的css 只注入到一个style 标签里。若无此配置,每个新的css 文件在注入时,都会建立一个新的style 标签,有的浏览器里对style 标签是有数量限制的。
六,建立postcss 配置文件 postcss.config.js,在其中引入autoprefixer 插件
module.exports = { plugins: [ require('autoprefixer') ] }
七,在package.json 中添加浏览器列表browserslist。这就是前言里说的坑,没有的话autoprefixer 就不起作用
{ "scripts": { "build": "webpack", "dev": "webpack-dev-server --mode development" }, "browserslist": [ "defaults", "not ie < 11", "last 2 versions", "> 1%", "iOS 7", "last 3 iOS versions" ] }
八,运行命令
npm run build
九,css解析成功,效果如下:
#world { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
到此,关于“webpack4是如何处理css的”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
网站题目:webpack4是如何处理css的
标题链接:http://scyanting.com/article/iicgig.html