webpack同型別檔案執行不同loader操作

木木士鈊發表於2018-05-21
Web型別

以前在需要相容ie8的情況下，前端會有基於webpack會進行兩套工作流，pc一套（webpack1.x.x），h5一套(最新版本的webpack)。公司本身太多東西不能捨棄ie使用者，不過現在跑到了新公司，不需要考慮pc相容ie8的問題了，那麼也就覺得沒必要搞兩套工作流相容不同瀏覽器了。基於以上所述，決定修改一下webpack的配置，在同一個工作流裡完成移動端跟pc的的開發。

做移動端h5開發的時候大家都知道應該使用px2rem這個外掛來編譯css，如果有的剛做前端的小夥伴不清楚為什麼，就解釋一下為什麼要用這個外掛吧。

  • 接手公司的外包專案發現都是直接寫rem的，這個怎麼跟設計稿換算尺寸的呢，不清楚換算單位，也沒有哪裡備註說明（這就是一些外包質量差的啦，外包質量好的當然也有啦）
  • 每次量完ps尺寸之後還要手動計算一下轉換成rem，小夥伴表示這效率也太慢了

基於以上兩原因，有經驗的小夥伴是不會直接在css裡面去寫rem的。那麼就開始用起來webpack做一個不編譯px到rem的pc版本的css,同時也可以編譯px到rem的配置咯。

  • 新增模組 yarn add webpack webpack-cli style-loader css-loader

  • 配置webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  watch: true,
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'js/[name].bundle.js'
  },
  module: {
    rules: [{
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      
    ]
  }
}
複製程式碼
  • 在package.json裡面新增scripts
"watch": "webpack"
複製程式碼
  • 這一步驗證一下是否樣式OK了，我是在本地直接用anywhere 開啟一個server來除錯的，所以不做server的介紹咯。
  • 那麼現在要分開做移動端跟pc端的處理了，主要用到moduel.rules的include,這個跟test的功能差不多，都是屬於過濾條件，主要用於資料夾過濾的。那麼就考慮css檔案分兩個目錄一個css資料夾與一個test資料夾，test資料夾放置H5的樣式檔案。
  • 新增模組yarn add postcss-loader autoprefixer postcss-flexbugs-fixes postcss-px2rem
  • 修改rules
{
        test: /\.css$/,
        include: [
          path.resolve(__dirname, "src/css"),
        ],
        use: ['style-loader', {
          loader: 'css-loader',
          options: {
            // root: '.'
          }
        }]
      },
      {
        test: /\.css$/,
        include: [
          path.resolve(__dirname, "src/test"),
        ],
        use: ['style-loader', {
          loader: 'css-loader',
          options: {
            root: '.'
          }
        }, {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: () => [
              flexbugs,
              autoprefixer({
                browsers: [
                  '>1%',
                  'last 4 versions',
                  'Firefox ESR',
                  'not ie < 9', // React doesn't support IE8 anyway
                ],
                flexbox: 'no-2009',
              }),
              px2rem({
                remUnit: 75
              })
            ],
          }
        }]
      },
複製程式碼
  • 以上就是在test目錄下的css檔案進行px2rem的區別處理了。同理也可以對其他的檔案進行處理這裡就不多說啦。小夥伴們自己去體驗吧。附上git地址

相關文章