Create React App 的Webpack4配置高级进阶

最新推荐文章于 2024-07-09 20:06:04 发布

前端瓶子君

最新推荐文章于 2024-07-09 20:06:04 发布

阅读量1.4k

点赞数

分类专栏： react webpack

本文链接：https://blog.csdn.net/lunahaijiao/article/details/84936906

版权

本文介绍了如何在Create React App (CRA) 中进行Webpack4的高级配置，包括添加antd支持，配置less以及解决跨域问题。通过eject操作暴露webpack配置，然后详细说明了如何配置antd的less以及按需加载，同时讲解了如何使用webpack-dev-server设置代理以实现跨域访问。

摘要由CSDN通过智能技术生成

React 框架搭建

Creact React App(CRA)是创建React应用的一个构建脚本，并不处理后端逻辑及数据库，它与其他构建脚本不同的一点就是，它使用了 Babel 和 Webpack 这样的构建工具，使开发者不用单独去配置这些工具，从而降低了开发人员的学习难度。
但对于一些高阶的开发人员，想要对Webpack做一些修改，包括对less、跨域访问的支持以及antd的配置等，下面就是我的具体做法。
注意当前webpack的版本"webpack": "4.19.1",时基于此给出的解决方案，webpack至少是4以上版本。
按照React 官网创建你的React项目，这里就不在讲解。
使用CRA创建好项目之后，打开package.json文件：

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

执行yarn eject将封装到CRA中的全部配置反编译到当前项目，由此webpack的配置全部暴露给了开发者。

// eject 后项目根目录下会出现 config 文件夹，里面就包含了 webpack 配置
config
├── env.js
├── jest
│   ├── cssTransform.js
│   └── fileTransform.js
├── paths.js
├── webpack.config.dev.js // 开发环境配置
├── webpack.config.prod.js // 生产环境配置
└── webpackDevServer.config.js

// eject 后项目根目录下会出现 scripts 文件夹，里面就包含了 项目启动文件
├── build.js //生产环境
├── start.js // 开发环境
├── test.js // 测试环境

CRA和其他构建脚本不同的是，它可以通过升级react-scripts来升级CRA特性，但是如果使用eject命令后，就无法使用了，因为react-scripts已经是以文件的形式存在于你的项目，而不是以包的形式，所以无法对其升级。

Webpack配置

这时，一个简单的项目已经可以运行成功了并且webpack配置暴露了出来，下面安装antd，配置antd

1. antd

yarn add antd安装后，你可以使用antd的组件，官网提供了两种配置方案，我们这里只介绍eject配置。

配置less，antd 的样式使用了 Less 作为开发语言，安装yarn add less及yarn add less-loader
按需加载，yarn babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件
自定义主题
打开webpack.config.dev.js，作出相应的修改：

...
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
//--------------------注意：这里需要增加less的相关配置--------------------
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
   
 ...
 // --------------------注意，在此处修改了判断语句的代码，增加对less的支持--------------------
 if (preProcessor) {
   
     if (preProcessor === 'less-loader') {
   
         loaders.push({
   
             loader:require.resolve(preProcessor),
             options: {
   
                 modules: false,
                 modifyVars: {
   
                     "@primary-color": "#1890ff" // 这里配置antd的自定义主题色
                 },
                 javascriptEnabled: true
             }
         })
     } else {
   
         loaders.push(require.resolve(preProcessor));
     }
 }
 return loaders;
 };
 // This is the development configuration.
 // It is focus