create-react-app脚手架，用于快速搭建react项目，但有些时候需要做一些配置修改以满足项目需求。

已同步更新 create-react-app 至v5.0.0版本

一、配置

首先需要调出默认的 webpack 配置文件，然后才能随心所欲的做定制修改：

  • 运行命令：
npm run eject

运行完后会自动在项目根目录里生成相应的配置文件，例如config和scripts文件夹

1、更改本地运行端口号

（1）方式一

  • 文件更改位置：/scripts/start.js
  • 代码位置：
// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;

3000即为端口号，修改即可。不要使用66开头的端口号(66xx之类的)，会被浏览器认定为不安全。

（2）方式二
项目根目录创建.env文件，写入以下内容：

PORT = 8200

2、关闭自动打开浏览器

  • 文件更改位置：/scripts/start.js
  • 代码位置：
openBrowser(urls.localUrlForBrowser);

注释这行代码即可

3、添加快捷标识路径 @

例如：@

  • 文件更改位置：/config/webpack.config.js
  • 代码位置：
alias: {
  // Support React Native Web
  // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
  'react-native': 'react-native-web',
  // Allows for better profiling with ReactDevTools
  ...(isEnvProductionProfile && {
    'react-dom$': 'react-dom/profiling',
    'scheduler/tracing': 'scheduler/tracing-profiling',
  }),
  ...(modules.webpackAliases || {}),
  
  // ------------追加以下代码
  '@': path.join(__dirname,'../src')
},

4、添加 postcss-loader 插件

例如：rem 转 px

  • 首先安装rem转px依赖包：npm i postcss-plugin-px2rem
  • 文件修改位置：/config/webpack.config.js
  • 代码位置：
[
  'postcss-flexbugs-fixes',
  [
    'postcss-preset-env',
    {
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
    },
  ],
  // Adds PostCSS Normalize as the reset css with default options,
  // so that it honors browserslist config in package.json
  // which in turn let's users customize the target behavior as per their needs.
  'postcss-normalize',
  
  // ------------追加以下代码
  [
	'postcss-plugin-px2rem',
	{
	  	rootValue: 37.5,
	    unitPrecision: 5,
	    propWhiteList: [],
	    propBlackList: [],
	    exclude: false,
	    selectorBlackList: ['noRem'],
	    ignoreIdentifier: false,
	    replace: true,
	    mediaQuery: false,
	    minPixelValue: 2
	}
  ]
]

5、添加 less 支持

  • 首先安装less依赖包： npm i less less-loader
  • 文件修改位置：/config/webpack.config.js
  • 代码位置1：
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

// ------------追加以下代码
const lessRegex = /\.less$/
const lessModuleRegex = /\.module\.less$/
  • 代码位置2：
{
  test: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    'sass-loader'
  ),
},

// ------------追加以下代码
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'less-loader'
  ),
  sideEffects: true,
},
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    'less-loader'
  ),
},

6、添加 less 全局变量

添加less全局变量后可以很方便的在less样式里直接使用该变量，而不用再重复定义引用。

  • 文件修改位置：/config/webpack.config.js
  • 代码位置：
if (preProcessor) {
  loaders.push(
    {
      loader: require.resolve('resolve-url-loader'),
      options: {
        sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        root: paths.appSrc,
      },
    },
    {
      loader: require.resolve(preProcessor),
      options: {
        sourceMap: true,
      },
    }
  );
}

------------ 修改为以下代码：

if (preProcessor) {
  let preProcessorLoader = {
    loader: require.resolve(preProcessor),
    options: {
      sourceMap: true
    },
  }
  if (preProcessor === 'less-loader') {
    preProcessorLoader.options = {
      ...preProcessorLoader.options,
      lessOptions: {
        modifyVars: { 
          // 在这里定义less全局变量
          '@imgBase': '~@/assets/images/'
        },
        javascriptEnabled: true,
      },
    }
  }
  loaders.push(
    {
      loader: require.resolve('resolve-url-loader'),
      options: {
        sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        root: paths.appSrc,
      },
    },
    preProcessorLoader
  );
}

7、引入代码校验

引入代码校验对于团队开发以及减少代码低级bug很有帮助，强烈推荐引入，
具体配置可以参考我之前的文章-前端h5项目统一代码风格配置

8、关闭 sourceMap

在项目根目录新建.env文件，写入以下内容：

GENERATE_SOURCEMAP = false

打包时其实就是根据process.env.GENERATE_SOURCEMAP的值来判断是否开启sourceMap。

9、移除 manifest 相关文件

manifest文件是service work缓存使用的，service work是依赖web worker的一种缓存策略，也是PWA的基础，不熟悉的情况下不要轻易使用。

  • 首先删除public下的logo图片和manifest.json文件
  • 然后public/index.html里删除下列代码：
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  • 然后config/webpack.config.js里注释以下代码：
    new WebpackManifestPlugin({
  fileName: 'asset-manifest.json',
  publicPath: paths.publicUrlOrPath,
  generate: (seed, files, entrypoints) => {
    const manifestFiles = files.reduce((manifest, file) => {
      manifest[file.name] = file.path;
      return manifest;
    }, seed);
    const entrypointFiles = entrypoints.main.filter(
      fileName => !fileName.endsWith('.map')
    );

    return {
      files: manifestFiles,
      entrypoints: entrypointFiles,
    };
  },
}),

10、配置部署服务器基路径

如果项目是部署到服务器域名下的子目录，就需要配置基路径，特别是browser路由模式下需要使用配置。

项目根目录创建.env文件，写入以下内容：

PUBLIC_URL = '/h5'

  • 这里就是配置了基路径为/h5，项目中通过process.env.PUBLIC_URL可以获取到该值。

  • BrowserRouter路由配置示例：

    <BrowserRouter basename={process.env.PUBLIC_URL}>
  <App />
</BrowserRouter>

11、关闭 assets、modules 日志

webpack5 默认情况下启动项目后，在控制台命令行会出现很多扰人的assets、modules等输出日志，例如下图：

ps：曾花了很长一段时间在网上找都没找到解决方式，最终还是靠自己不断地研读webpack官方文档并反复试验才解决。

关闭方式：

  • 文件修改位置：/config/webpack.config.js 最底部
  • 代码位置：
	performance: false,
	// 在这里追加代码，添加以下一行
    stats: process.env.NODE_ENV === 'development' ? 'minimal' : undefined
  };
};

12、显示 webpack 构建进度

严格的说这条不是修改create-react-app的默认配置，而是给我们的webpack项目加功能，也就是配一个plugins。

  • 安装插件：npm i progress-webpack-plugin -D
  • 文件修改位置：/config/webpack.config.js
  • 代码位置：
// 先在文件顶部引入插件（自己找位置）
const ProgressPlugin = require('progress-webpack-plugin')

	plugins: [
	  ...,
	  !disableESLintPlugin &&
        new ESLintPlugin({
          ...
        }),
      // 在这里追加代码，添加以下一行
      isEnvDevelopment && new ProgressPlugin(true),
    ].filter(Boolean),

二、.env文件

看完以上就会发现很多配置用到了.env文件，

项目根目录创建.env文件，在这里可以配置process.env变量，create-react-app的很多默认配置就是从这里读取，以下是一些常用配置项说明。

# 是否开启sourceMap
GENERATE_SOURCEMAP = false

# 本地启动端口号
PORT = 8200

# 部署服务器基路径
PUBLIC_URL = '/h5'

# 打包文件输出目录
BUILD_PATH = 'dist'

# 是否关闭eslint
DISABLE_ESLINT_PLUGIN = true

# 图片自动转base64的size阈值
IMAGE_INLINE_SIZE_LIMIT = '10000'

更多webpack相关配置教程可参考我的另一文章：webpack 从零开始配置教程

# 前端 # webpack # less
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

GaussDB关键技术原理：高性能（三）

avatar 华为云开发者联盟
cover

华为云技术专家硬核分享，云原生中间件如何加速业务发展

avatar 华为云开发者联盟
cover

深度解读昇腾CANN多流并行技术，提高硬件资源利用率

avatar 华为云开发者联盟