前言：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 1%",
"iOS 7",
"last 3 iOS versions"
]
}
八，運行命令
npm run build
九，css解析成功，效果如下：
#world {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
