配置webpack

修改webpack 的推荐方式有两种：（二选一即可）

react-app-rewired配置webpack
使用craco配置webpack

react-app-rewired配置webpack

确定版本

如果是react-app-rewired@2.x版本，需要搭配customize-cra使用 customize-cra的作用是帮助自定义 react 脚手架 2.x 版本配置，https://www.jianshu.com/p/352e33c56d55

yarn add react-app-rewired customize-cra -D

修改 package.json文件

"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject",

新建config-overrides.js 文件

修改webpack配置，考虑生产环境和开发环境

如果不熟悉webpack 的配置文件和常见属性，请先熟悉了解

const { override, addWebpackAlias} = require('customize-cra')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
const isProd = process.env.NODE_ENV === 'production'
const path = require('path')

module.exports = override(
  //别名
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src')
  }),
  //显示构建状态信息
  addWebpackPlugin(new ProgressBarPlugin()),
  //移除代码中的 console.log，https://juejin.cn/post/7055228673904869406
  isProd &&
    addBabelPlugin('transform-remove-console', { exclude: ['error', 'warn'] })

)

如果是ts项目，需要修改tsconfig.json，设置baseUrl，paths

{
  "compilerOptions": {
    ...
    "noImplicitAny": false,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ],
    }
  },
  ...
}

customize-cra 的属性

常用属性：

addBabelPlugin、addBabelPlugins：添加 Babel 插件
addBabelPreset：添加 Babel 预设（就是引入多个Babel插件，Babel 预设是插件集合）
addWebpackPlugin：添加 Webpack插件
addWebpackExternals：用于将一些库或模块从打包文件中排除
优点：减小打包文件的体积
缺点：这些库或模块必须在外部环境（CDN）中存在，否则代码将无法运行
addWebpackModuleRule：添加自定义的 Webpack Loader ，或修改已有的 Loader。

addWebpackAlias：添加 Webpack 别名。如：

const resolvePath = (dir) => {
  return path.join(__dirname, '..', dir)
}

addWebpackAlias({
    '@': resolvePath('src'),
    'components': resolvePath('src/components'),
    ...
}),

setWebpackPublicPath：设置 Webpack 的公共路径。
fixBabelImports：需要按需加载的库的名称，如antd、lodash 的按需加载。fixBabelImports 方法需要安装 babel-plugin-import 插件
disableEsLint：禁用 ESLint。作用范围仅限于开发环境，使用不多。通常改环境变量 DISABLE_ESLINT_PLUGIN
adjustStyleLoaders：用于调整 Webpack 中的样式加载器。如sass-resources-loader注入全局变量
addLessLoader：添加额外的 LessLoader 配置，前提是安装了 less less-loader 依赖
addPostcssPlugins：添加post-css 插件
setWebpackOptimizationSplitChunks：拆包。

参考链接：

创建一个全新的 react 项目开始

Create React App 无eject配置

目录CONTENT

项目基建（三）react-app-rewired配置webpack