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