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