欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

聊聊关于webpack4是怎么处理css的

程序员文章站 2022-03-07 12:37:06
...

前言: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;
}

推荐学习:《css视频教程

以上就是聊聊关于webpack4是怎么处理css的的详细内容,更多请关注其它相关文章!

相关标签: webpack4