欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用react-app-rewired和customize-cra对默认webpack自定义配置

程序员文章站 2022-03-07 15:42:12
最近在学习react框架,之前一直都是用vue 开发,知道在vue 中知道如何配置一下相关的webpack 有助于开发,学react 过程中,我也在想这些该怎么配置啊,所以就有这篇文章。 这篇文章主要是讲 react-create-app 生成的项目利用 react-app-rewired 和 cu ......

最近在学习react框架,之前一直都是用vue 开发,知道在vue 中知道如何配置一下相关的webpack 有助于开发,学react 过程中,我也在想这些该怎么配置啊,所以就有这篇文章。

 

这篇文章主要是讲 react-create-app 生成的项目利用 react-app-rewired 和 customize-cra 的配置

1. 首先我们 创建一个项目 myapp ,执行命令

npm create react-app myapp

2. 然后安装 react-app-rewired 和 customize-cra 

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

3. 改写package.json 的启动命令

/* 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"
}

4. 修改后直接执行npm start 启动项目,你会发现报错,没关系,报错就解决,你会发现报错信息中有:

the “injectbabelplugin” helper has been deprecated as of v2.0
翻译:
自2.0版起,“injectbabelplugin”助手已被弃用

react-app-rewired的新版本删除了injectbabelplugin,这些方法被移动到一个名为’customize-cra’的新包中

 解决方案就是降低版本,执行两个命令:

npm uninstall react-app-rewired  //删原来的
npm install react-app-rewired@2.0.2 --save-dev  //安装指定底版本的

执行 npm start 命令后,项目就可以跑起来了

5. 项目的根目录会多一个配置文件config-overrides.js (如果没有,手动新建)

   接下来做一些webpage的配置,比如插件配置,路径别名,ui 插件按需加载,修改、添加loader

直接上完整代码,带注释

const { override, fixbabelimports ,addwebpackexternals ,addwebpackalias ,addlessloader } = require('customize-cra');
const path = require("path")
const uglifyjsplugin = require("uglifyjs-webpack-plugin")
const myplugin = [
  new uglifyjsplugin(
    {
      uglifyoptions: {
        warnings: false,
        compress: {
          drop_debugger: true,
          drop_console: true
        }
      }
    }
  )
]

module.exports = override( 
  fixbabelimports('import', { //配置按需加载
    libraryname: 'antd',
    librarydirectory: 'es',
    style: true,
  }),
  addwebpackexternals({ //不做打包处理配置,如直接以cdn引入的
    echarts: "window.echarts",
    // highcharts:"window.highcharts"
  }),
  addwebpackalias({ //路径别名
    '@': path.resolve(__dirname, 'src'),
  }),
  addlessloader({
    javascriptenabled: true,
    modifyvars: {
      '@primary-color': '#1da57a'
    }
  }),
  (config)=>{ //暴露webpack的配置 config ,evn
    // 去掉打包生产map 文件
    // config.devtool = config.mode === 'development' ? 'cheap-module-source-map' : false;
    if(process.env.node_env==="production") config.devtool=false;
    if(process.env.node_env!=="development") config.plugins = [...config.plugins,...myplugin]
    //1.修改、添加loader 配置 :
    // 所有的loaders规则是在config.module.rules(数组)的第二项 
    // 即:config.module.rules[2].oneof  (如果不是,具体可以打印 一下是第几项目)
    // 修改 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/base.scss')//全局引入公共的scss 文件
      }
  })

    
    return config
  }

);