前言：webpack 處理css是一個(gè)很基礎(chǔ)的話題。只是在webpack4 里，用autoprefixer解決css 的瀏覽器的兼容性時(shí)，會(huì)有個(gè)和以前不一樣的坑。所以就再詳細(xì)的寫一下這方面的知識(shí)。

一，所需依賴

• style-loader：將css 文件注入到html 頁面的style 標(biāo)簽中。參考：https://www.webpackjs.com/loa…
• css-loader：解析import 到j(luò)s 里的css 文件。參考： https://www.webpackjs.com/loa…
• less-loader：解析css 預(yù)處理語言，若使用的是其它的預(yù)處理語言，就要使用與其對應(yīng)的loader。參考： https://www.html.cn/doc/webpa…

• postcss-loader：對我們在項(xiàng)目中寫完的css 進(jìn)行后期處理：

  • 把 CSS 解析成 JavaScript 可以操作的抽象語法樹結(jié)構(gòu)（Abstract Syntax Tree，AST），
  • 調(diào)用插件來處理 AST 并得到結(jié)果。
• autoprefixer：postcss-loader的插件，為css 加前綴，以適應(yīng)不同瀏覽器。

注：postcss-loader的作用就像影視后期一樣，把所有的原始文件合在一起，然后用插件加上特效，最后輸出成品。autoprefixer 插件就對postcss-loader 解析出的AST 進(jìn)行后期加工。

二，安裝依賴

npm install --save-dev less-loader less style-loader css-loader postcss-loader autoprefixer

三，建立less 測試文件 style.less

#world{   display: flex; }

四，在主文件index.js 中導(dǎo)入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，是一個(gè)很重要的設(shè)置。這會(huì)讓所有解析完成的css 只注入到一個(gè)style 標(biāo)簽里。若無此配置，每個(gè)新的css 文件在注入時(shí)，都會(huì)建立一個(gè)新的style 標(biāo)簽，有的瀏覽器里對style 標(biāo)簽是有數(shù)量限制的。

六，建立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"  ] }

八，運(yùn)行命令

npm run build

九，css解析成功，效果如下：

#world {   display: -webkit-box;   display: -webkit-flex;   display: -ms-flexbox;   display: flex; }