create

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// /'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 从零开始配置教程

create

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// /'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 从零开始配置教程

USB迷 | 专注于互联网分享

create

create

一、配置

1、更改本地运行端口号

2、关闭自动打开浏览器

3、添加快捷标识路径 @

4、添加 postcss-loader 插件

5、添加 less 支持

6、添加 less 全局变量

7、引入代码校验

8、关闭 sourceMap

9、移除 manifest 相关文件

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

11、关闭 assets、modules 日志

12、显示 webpack 构建进度

二、.env文件

create

一、配置

1、更改本地运行端口号

2、关闭自动打开浏览器

3、添加快捷标识路径 @

4、添加 postcss-loader 插件

5、添加 less 支持

6、添加 less 全局变量

7、引入代码校验

8、关闭 sourceMap

9、移除 manifest 相关文件

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

11、关闭 assets、modules 日志

12、显示 webpack 构建进度

二、.env文件

与本文相关的文章

评论列表 (0)