扩展 create-react-app 项目中的 webpack 配置

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'
  ),
}