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 } );
- 上一篇 »HTML5 手机端动态适配
- 下一篇 »CSS 关于屏幕适配REM