create-react-app项目配置修改参考

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

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

1、调出webpack配置文件

运行命令： npm run eject

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

2、更改本地运行端口号

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

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

3、关闭自动打开浏览器

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

注释这行代码即可

4、添加快捷标识路径，例如@

文件更改位置：/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') },

5、添加postcss-loader插件，例如rem转px

首先安装rem转px依赖包：npm i postcss-plugin-px2rem文件修改位置：/config/webpack.config.js代码位置： plugins: () => [ require('postcss-flexbugs-fixes'), require('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. postcssNormalize(), // ------------追加以下代码 require('postcss-plugin-px2rem')({ rootValue: 37.5, unitPrecision: 5, propWhiteList: [], propBlackList: [], exclude: false, selectorBlackList: ['noRem'], ignoreIdentifier: false, replace: true, mediaQuery: false, minPixelValue: 2 }) ],

6、添加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' ), },

7、添加less全局变量

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

文件修改位置：/config/webpack.config.js代码位置： if (preProcessor) { loaders.push( { loader: require.resolve('resolve-url-loader'), options: { sourceMap: isEnvProduction && shouldUseSourceMap, }, }, { 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, }, }, preProcessorLoader ); }

8、引入代码校验

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

9、后续想到了再更~