webpack4是如何处理css的

这篇文章主要介绍"webpack4是如何处理css的"，在日常操作中，相信很多人在webpack4是如何处理css的问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"webpack4是如何处理css的"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

前言：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的"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！