react cra 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
}

);