react项目关于webpack配置修改

前言

您好，我是本际云服务器推荐网的小编小本本。如果您使用CRA脚手架构建的项目想要修改webpack配置，一般情况下需要将其释放或通过插件去更改和覆盖配置。接下来，我将介绍以下几种常见方式：

react项目关于webpack配置修改

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

方法一：

下载插件和依赖

yarn add react-app-rewired customize-cra babel-plugin-import -D

修改package.json

将scripts中的内容修改为以下代码：

{ "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" } }

新建config-overrides.js文件

在项目根目录下新建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修改或覆盖配置

方法二：

安装插件和依赖

yarn add @craco/craco craco-less @babel/plugin-proposal-decorators babel-plugin-import -D

新建craco.config.js文件

在根目录下新建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 } } } } ] };