以前在需要兼容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的区别处理了。同理也可以对其他的文件进行处理这里就不多说啦。小伙伴们自己去体验吧。附上