webpack的移动端适配方案小结

//移动页面中不可少的meta,将设备屏幕的宽度设置成将文档宽度
<meta name="viewport" content="width=device-width, initial-scale=1，user-scalable=0">

//根据文档宽度计算根元素的字体大小,以文档宽度的1/10为例，如果屏幕宽度为375，那么根元素font-size就为37.5px
var w = document.documentElement.clientWidth;
document.documentElement.style.fontSize = w / 10 + 'px';

//此时如果在css中写
.div{
  width: 2rem;
}
//那么这个div的宽度就是75px，同理如果屏幕宽度为360，那么div就宽72px。
//日常开发中，比较常见的设计稿是750px，在设计稿中一个区域的高度为30px的话，
//在css中写成 height：0.4rem（30/75），就能完成等比缩放

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname,"/dist"),
        filename: "bundle.js"
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use:  ['style-loader','css-loader','postcss-loader']  //配置postcss-loader
            }
        ]
    },  
}

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
        rootValue: 75,                   //750的设计稿
        propList: ['*']
     }
   }
}

import 'amfe-flexible'

#test{
  width: 200px
}

//移动页面中不可少的meta,将设备屏幕的宽度设置成将文档宽度
<meta name="viewport" content="width=device-width, initial-scale=1，user-scalable=0">

module.exports = {
  "plugins": {
    'postcss-px-to-viewport': {
        viewportWidth: 750                 //750的设计稿
     }
   }
}

const path = require('path')
module.exports = ({file}) => {

  //如果使用vant UI框架
  const width = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750; 
  
  return {
    "plugins": {
      "postcss-px-to-viewport": {
        viewportWidth: width,
      }
    }
  }
}