react移动端项目使用px2rem适配和antd-mobile按需加载的webpack小结

  创建项目：

npx create-react-app 项目名称

　使用customize-cra修改react的webpack配置,安装依赖(这里指定一下版本)

npm install react-app-rewired@2.0.2 customize-cra --save-dev　

　 修改 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 直接引入 lib-flexible

import 'lib-flexible'

　这样适配就完成了，直接在项目中写px ,会自动转rem,在内嵌样式style 上是无效的，所以在样式一般是鞋子要样式文件中才能自动转　

二： 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
    }
);　　

这样按需加载配置ant-mobile 就完成了

三：使用scss 并且配置全局样式文件

1.安装依赖

npm install sass-resources-loader --save-dev

2. 修改　config-overrides.js

const {override}  = require("customize-cra")
const path = require("path")

 module.exports = override(
    (config,env)=>{
       // 修改 sass 配置 ，规则 loader 在第五项(具体看配置)
       // 全局引入公共样式，使用时候不需再导入
        const loaders = config.module.rules.find(rule => Array.isArray(rule.oneOf)).oneOf;
        loaders[5].use.push({
        loader: 'sass-resources-loader',
        options: {
                resources: path.resolve(__dirname, 'src/asset/css/common.scss')//全局引入公共的scss 文件
            }
         })

        return config
    }
);

4. 其他一些webpack常规配置　　

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
    }
);