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;
}