react项目关于webpack配置修改

这是我参与更文挑战的第6天，活动详情查看：更文挑战

一、前言

通过CRA脚手架构建的项目，一般webpack配置是隐藏的，如果要修改，就要另外处理。

想要修改webpack通常有两种方式

• 通过插件去增加或覆盖webpack配置（方法一、方法二）
• 或者释放项目中的webpack配置，使之可见，然后可以修改（方法三）

本来CRA脚手架将webpack等复杂的配置封装在项目中，后续可以通过更新react-scripts来体验版本升级带来的新特性，但有些时候确实需要我们修改webpack配置，适应项目的需要，所以我们一般选择通过插件覆盖webpack配置，当然也可以完全放开配置。

以下几种常见的方式有：

二、利用react-app-rewired修改或覆盖配置（推荐）

1、下载插件、依赖

yarn add react-app-rewired customize-cra babel-plugin-import -D
复制代码

2、修改package.json

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
}
复制代码

3、在项目根目录下新建文件config-overrides.js

const { override, fixBabelImports, addLessLoader } = require("customize-cra");

module.exports = override(
    fixBabelImports("import", {
        libraryName: 'antd',
        libraryDirectory: "es",
        style: true
    }),
    addLessLoader({
        javascriptEnabled: true
    })
);
复制代码

这里配置webpack支持less语法，可以看到这里与通常配置的webpack不太一样，详细配置可以看react-app-rewired官方文档

App.css和index.css修改为App.less和index.less

然后在项目中引入，发现项目运行正常

三、利用插件@craco/craco修改或覆盖配置

1、安装插件、依赖

yarn add @craco/craco craco-less @babel/plugin-proposal-decorators babel-plugin-import -D
复制代码

2、在根目录下新建craco.config.js

const CracoLessPlugin = require("craco-less")
const path = require('path')
const pathResolve = pathUrl => path.join(__dirname, pathUrl)

module.exports = {
  webpack: {
    alias: {
      '@': pathResolve('src')
    }
  },
  babel: {
    plugins: [
      ['@babel/plugin-proposal-decorators', { legacy: true }]
    ]
  },
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {},
            javascriptEnabled: true
          }
        }
      }
    }
  ]
}
复制代码

这里配置引入的别名 ‘@’，具体使用

在src下新建目录pages/index.js

export const DATA = "test"
复制代码

这里同时展示下引入插件的方法@babel/plugin-proposal-decorators

@craco/craco参考文档

四、完全编译webpack到项目中

1、释放webpack配置

下载好的项目，在package.json中可以看到这样的脚本

{
  "scripts": {
    "eject": "react-scripts eject"
  }
}
复制代码

执行yarn eject, 将封装的webpack配置编译到项目中，这样可以获取webpack的全部配置，自行修改。

cd fronted-demo
yarn eject
复制代码

可以看到fronted-demo项目目录下新增了很多的文件，这些文件都是webpack的配置，可以修改任意的配置，但也导致项目文件骤增，并且该过程不可逆。

主要的配置放在config文件中

这就和webpack原始的配置一样了，

2、配置less-loader

这里配置引入less-loader

在config/webpack.config.js下module/rules下添加该配置，然后在项目中添加common.less文件

.color-red {
    color: red
}
复制代码

在index.tsx文件中

import "./common.less"
<div className="color-red">test</div>
复制代码

运行后发现

3、注意

• 1、less-loader 版本不能超过6.0.0，超过了写法不一样，会报错，这是因为高版本的less-loader语法变了，需要写新的格式。

TypeError: this.getOptions is not a function

• 2、注意这两行配置，less-loader要写在file-loader前才能生效