webpack4 的樣式處理 - less、postcss

less、postcss

webpack 搭建文檔：https://webpack.eleven.net.cn

1. 須要安裝的依賴包

   yarn add less less-loader css-loader style-loader postcss-loader postcss-preset-env postcss-import cssnano postcss-safe-parser mini-css-extract-plugin -D

   過去版本的autoprefixer、postcss-cssnext已內置在postcss-preset-env內。

2. 配置

   默認會將 css 一塊兒打包到 js 裏，藉助 mini-css-extract-plugin 將 css 分離出來並自動在生成的 html 中 link 引入（過去版本中的 extract-text-webpack-plugin 已不推薦使用）。

   const MiniCssExtractPlugin = require('mini-css-extract-plugin')

   loader

   {
        test: /\.(less|css)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader'],
    }
   
    // 在啓用dev-server時，mini-css-extract-plugin插件不能使用contenthash給文件命名 => 因此本地起dev-server服務調試時，使用style-loader
    // USE_HMR是自定義的環境變量，意思是是否使用了熱替換中間件
    const styleLoader = process.env.USE_HMR ? 'style-loader' : MiniCssExtractPlugin.loader
   
    // 經過其餘合適的方式判斷是否爲本地調試環境也同樣，自由選擇。
    const styleLoader = process.env.BUILD_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader
   
    {
      test: /\.(less|css)$/,
      use: [styleLoader, 'css-loader', 'postcss-loader', 'less-loader'],
    },

   plugin

   // 單獨使用link標籤加載css並設置路徑，相對於output配置中的publickPath
   new MiniCssExtractPlugin({
     filename: 'static/css/[name].[contenthash:7].css', // 注意這裏使用的是contenthash，不然任意的js改動，打包時都會致使css的文件名也跟着變更。
     chunkFilename: 'static/css/[name].[contenthash:7].css',
   })

3. PostCSS 自己不會對你的 CSS 作任何事情, 你須要安裝一些 plugins（postcss GitHub 文檔） 才能開始工做。

   1. 在 package.json 同級目錄，新建 postcss.config.js 文件:

      module.exports = {
        // parser: 'sugarss', // 是一個以縮進爲基礎的語法，相似於 Sass 和 Stylus，https://github.com/postcss/sugarss
        plugins: {
          'postcss-import': {},
          'postcss-preset-env': {},
          'cssnano': {},
          'postcss-flexbugs-fixes': {},
        }
      }

   2. 經常使用的插件:

      • cssnano —— 會壓縮你的 CSS 文件來確保在開發環境中下載量儘量的小

   3. 其它有用的插件:

      • postcss-pxtorem —— px 單位自動轉換 rem
      • postcss-assets —— 插件用來處理圖片和 SVG, 相似 url-load
      • postcss-sprites —— 自動合成雪碧圖，提供了細緻的配置方法、插件去自定義控制（看上去略複雜）
      • img-loader —— 自動壓縮圖片，參數控制壓縮比率
      • postcss-font-magician —— 使用自定義字體時, 自動搞定@font-face 聲明
4. Less 是預處理，而 PostCSS 是後處理，基本支持 less 等預處理器的功能，自動添加瀏覽器廠商前綴向前兼容，容許書寫下一代 css 語法 ，能夠在編譯時去除冗餘的 css 代碼，PostCSS 聲稱比預處理器快 3-30 倍，由於 PostCSS，可能咱們要放棄 less/sass/stylus 了。