create-react-app 生成的项目对 webpack 的配置进行了封装并默认隐藏，但大多数时候我们需要扩展项目的 webpack 配置。
此处以配置 less-loader 为例，演示如何扩展 create-react-app 的 webpack 配置，有以下两种方式：
一、使用react-app-rewired
安装
yarn add react-app-rewired customize-cra
yarn add less less-loader
修改package.json配置
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test"
}
添加扩展配置
在项目根目录创建文件config-override.js：
const { override, addLessLoader } = require('customize-cra')
module.exports = override(
addLessLoader({
javascriptEnabled: true
})
)
二、yarn eject 显示隐藏的配置文件并修改
根目录下运行命令
yarn eject
此时隐藏的配置文件都显示出来了，./config/webpack.config.js 就是 webpack 的配置文件
安装 less 相关包
yarn add less less-loader
在配置文件中添加 less 规则
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
+ const lessRegx = /\.less$/;
+ const lessModuleRegex = /\.module\.less$/;
添加 loader 配置
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
sideEffects: true,
},
{
test: lessModuleRegex,
exclude:[/node_modules/],
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
),
}
