react 移动端px2rem适配、antd-mobile按需加载配置、px2rem影响第三方UI库样式

本次配置是不运行cnpm run eject 来进行配置的，如果需要在项目中配置一些webpack配置，需要在根目录下新建一个名称为config-overrides.js的文件
首先创建项目

create-react-app react-template 

使用customize-cra修改react的webpack配置,安装依赖更改package.json里边的配置

//原来的：
 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
//修改后:
 "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

px2rem适配的配置

1. 安装依赖

npm install postcss-px2rem lib-flexible --save
npm install react-app-rewire-postcss --save-dev

2. 在项目根目录创建config-overrides.js

const {override}  = require("customize-cra")
const path = require("path")
const rewirePostcss = require('react-app-rewire-postcss');
const px2rem = require('postcss-px2rem')
module.exports = override(
    (config,env)=>{
        // 重写postcss
        rewirePostcss(config,{
            plugins: () => [
                require('postcss-flexbugs-fixes'),
                require('postcss-preset-env')({
                    autoprefixer: {
                        flexbox: 'no-2009',
                    },
                    stage: 3,
                }),
               //关键:设置px2rem
                px2rem({
                    remUnit: 37.5,
                    exclude:/node-modules/
                })
            ],
        });
        return config
    }
);

3. 在index.js里边引入

import 'lib-flexible'

在 index.html 中

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

这样直接在项目中写px，就能自动装换成rem，内嵌的一些样式是不能改变的；

开始写的时候发现会有点问题，自动转换把第三方ui库的也给转换了，网上查了一番后，发现是插件的问题，需要更换插件

cnpm i postcss-px2rem-exclude -D

然后在config-overrides.js中

module.exports = override(
  (config,env)=>{
    // 重写postcss
    rewirePostcss(config,{
      plugins: () => [
        require('postcss-flexbugs-fixes'),
        require('postcss-preset-env')({
          autoprefixer: {
            flexbox: 'no-2009',
          },
          stage: 3,
        }),
        require("postcss-px2rem-exclude")({
          // remUnit 等于 设计稿宽度  750除以10  37.5
          remUnit: 75,
          exclude: /node_modules/i
        })
      ],
    });
    return config
  },
);

这样就没什么问题了；

antd-mobile按需加载

1. 安装依赖

npm install babel-plugin-import --save-dev
npm install antd-mobile --save

2. 修改　config-overrides.js

const {override,fixBabelImports }  = require("customize-cra")
 module.exports = override(
   //按需加载
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        style: 'css',
    }),
    (config,env)=>{
        return config
    }
);　　

其他一些webpack常规配置

安装插件

cnpm i uglifyjs-webpack-plugin -D

const {override,addWebpackAlias,addWebpackExternals}  = require("customize-cra")
const path = require("path")
const uglifyjsPlugin = require("uglifyjs-webpack-plugin")
const byPlugin = [
     //目的打包后压缩和去掉控制台输出和警告，打包过程出现:xxx.js ontains invalid source map（可忽略）
    new uglifyjsPlugin(
        {
            uglifyOptions:{
                warnings:false,
               compress:{
                   drop_debugger:true,
                   drop_console:true
               }
            }
        }
    )
];
 module.exports = override(
    //不做打包处理配置，如直接以cdn引入的
    addWebpackExternals({
        echarts: "window.echarts",
      }),
    //路径别名
    addWebpackAlias({
        '@': path.resolve(__dirname, 'src'),
    }),
    (config,env)=>{
        if(process.env.NODE_ENV!=="development"){
               config.devtool = false; 去掉打包后的map文件
               config.plugins = [...config.plugins,...byPlugin] // 打包是使用的插件
        }
        return config
    }
);