react项目关于webpack配置修改

您所在的位置：网站首页 › react配置端口 › react项目关于webpack配置修改

react项目关于webpack配置修改

2023-11-25 19:28| 来源: 网络整理| 查看: 265

这是我参与更文挑战的第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"