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