路径别名(alias)

const webpackConfig = {webpack: {alias: {'@': path.resolve(__dirname, 'src'), // 配置src别名},}
}
module.export = webpackConfig

修改打包产物文件夹名称

cra默认打包后的产物文件夹名build,我们习惯性的叫dist

关键的两行必须写:

paths.appBuild = 'dist'

path: path.resolve(__dirname, 'dist')

const webpackConfig = {webpack: {configure: (webpackConfig, { env, paths }) => {paths.appBuild = 'dist' // 修改打包输出文件目录webpackConfig.output = {...webpackConfig.output,path: path.resolve(__dirname, 'dist'), // 修改打包输出文件目录 两步都要写publicPath: whenProd(() => '/', '/'), // 静态资源publicpath}}})}
}

生产库引用cdn

cra内置了HtmlWebpackPlugin插件,直接用cra的getPlugin方法获取插件实例即可

const { getPlugin, pluginByName, whenProd } = require('@craco/craco')
const webpackConfig = {webpack: {configure((config,{env, paths})){// 线上替换cdn key:value key为库的名字 value为umd模块导出到global对象的key名whenProd(() => {webpackConfig.externals = {react: 'React','react-dom': 'ReactDOM',history: 'History','react-router-dom': 'ReactRouterDOM',redux: 'Redux','react-redux': 'ReactRedux',dayjs: 'dayjs',antd: 'antd',axios: 'axios','@ant-design/icons': 'icons',}})// 根据插件名获取插件 返回是否找到和匹配的插件const { isFound: isHtmlWebpackPluginFound, match: htmlWebpackPlugin } =getPlugin(webpackConfig, pluginByName('HtmlWebpackPlugin'))if (isHtmlWebpackPluginFound) {htmlWebpackPlugin.userOptions.title = whenProd(() => '后台管理系统-生产环境','后台管理系统-开发环境')// cdnurl要按照库的相互依赖优先级填写 被依赖的写前面优先加载htmlWebpackPlugin.userOptions.cdn = whenProd(() => ({js: ['https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.production.min.js','https://cdn.jsdelivr.net/npm/react-router-dom@5.3.0/umd/react-router-dom.min.js','https://cdnjs.cloudflare.com/ajax/libs/history/4.9.0/history.min.js','https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js','https://cdn.bootcdn.net/ajax/libs/redux/4.2.0/redux.min.js','https://cdn.bootcdn.net/ajax/libs/react-redux/8.0.5/react-redux.min.js','https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js','https://cdn.bootcdn.net/ajax/libs/antd/5.1.6/antd.min.js','https://cdn.bootcdn.net/ajax/libs/axios/1.2.5/axios.min.js','https://cdn.bootcdn.net/ajax/libs/ant-design-icons/5.0.1/index.umd.min.js',],css: ['https://cdn.bootcdn.net/ajax/libs/antd/5.1.6/reset.min.css'],}),// 本地环境设为空 防止页面遍历报错{js: [],css: [],})}return webpackConfig}}
}
module.exports = webpackConfig;

html模板遍历生成标签:

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><link rel="icon" href="%PUBLIC_URL%/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="theme-color" content="#000000" /><metaname="description"content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /><!--manifest.json provides metadata used when your web app is installed on auser's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/--><link rel="manifest" href="%PUBLIC_URL%/manifest.json" /><!--Notice the use of %PUBLIC_URL% in the tags above.It will be replaced with the URL of the `public` folder during the build.Only files inside the `public` folder can be referenced from the HTML.Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" willwork correctly both with client-side routing and a non-root public URL.Learn how to configure a non-root public URL by running `npm run build`.--><!-- js表达式写在<\%表达式\%> 渲染变量<\%=变量l\%> 这里的\是为了转义百分号防止webpack报错--><% htmlWebpackPlugin.options.cdn.css.forEach(cdnUrl => { %><link rel="stylesheet" href="<%= cdnUrl %>" /><% }) %><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript>您的浏览器不支持JavaScript 请开启JavaScript再浏览</noscript><div id="root"></div></body><% htmlWebpackPlugin.options.cdn.js.forEach(cdnUrl => { %><script type="text/javascript" src="<%= cdnUrl %>"></script><% }) %>
</html>

gzip压缩(或者用NGINX压成gzip)

先安装压缩插件compression-webpack-plugin:

yarn add compression-webpack-plugin -D

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const webpackConfig = {webpack: {configure(webpackConfig, { env, paths }){// 使用gzip压缩超过1M的js和css文件webpackConfig.plugins.push(new CompressionWebpackPlugin({algorithm: 'gzip',test: /\.(js|css)$/,threshold: 1024,minRatio: 0.8,}))return webpackConfig}}
}
module.exports = webpackConfig;

混入全局scss文件

使用插件craco-sass-resources-loader处理全局scss,先安装:

yarn add craco-sass-resources-loader -D

const sassResourcesLoader = require('craco-sass-resources-loader')
const webpackConfig = {plugins: [{plugin: sassResourcesLoader, // 在所有scss文件加载前加载 全局加载到前面options: {// 配置多个文件 传文件的绝对路径resources: [path.resolve(__dirname, 'src', 'styles', 'common.module.scss'),path.resolve(__dirname,'src','styles','global-variables.module.scss'),path.resolve(__dirname, 'src', 'styles', 'antd.module.scss'),],},},],
}
module.exports = webpackConfig;

修改开发服务器端口

const webpackConfig = {devServer: {port: 8421,}
}
module.exports = webpackConfig;

分析打包的js包体积

安装插件source-map-explorer(cra官方文档推荐插件)还有一款彩色的可视化插件:webpack-bundle-analyzer,安装插件

yarn add source-map-explorer -D

package.json配置脚本:

注意: 要开sourcemap,否则执行会报错:export GENERATE_SOURCEMAP=true 加export导出变量到.env.环境文件默认.env.dev文件环境变量是开启的GENERATE_SOURCEMAP=true

{"scripts": {"dev": "craco start","build": "craco build","buildServe": "craco build && serve -s dist","analyze": "export GENERATE_SOURCEMAP=true && yarn build && source-map-explorer dist/static/js/*.js"},
}

craco.config.js完整代码:

const path = require('path')
const sassResourcesLoader = require('craco-sass-resources-loader')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const { getPlugin, pluginByName, whenProd } = require('@craco/craco')
const config = {devServer: {port: 8421,},webpack: {alias: {'geek-pc': path.resolve(__dirname, 'src'),},configure: (webpackConfig, { env, paths }) => {paths.appBuild = 'dist' // 修改打包输出文件目录webpackConfig.output = {...webpackConfig.output,path: path.resolve(__dirname, 'dist'), // 修改打包输出文件目录 两步都要写publicPath: whenProd(() => '/', '/'), // 静态资源publicpath}// 线上替换cdn key:value key为库的名字 value为umd模块导出到global对象的key名whenProd(() => {webpackConfig.externals = {react: 'React','react-dom': 'ReactDOM',history: 'History','react-router-dom': 'ReactRouterDOM',redux: 'Redux','react-redux': 'ReactRedux',dayjs: 'dayjs',antd: 'antd',axios: 'axios','@ant-design/icons': 'icons',}})// 根据插件名获取插件 返回是否找到和匹配的插件const { isFound: isHtmlWebpackPluginFound, match: htmlWebpackPlugin } =getPlugin(webpackConfig, pluginByName('HtmlWebpackPlugin'))if (isHtmlWebpackPluginFound) {htmlWebpackPlugin.userOptions.title = whenProd(() => '生产环境','开发环境')// cdnurl要按照库的相互依赖优先级填写 被依赖的写前面优先加载htmlWebpackPlugin.userOptions.cdn = whenProd(() => ({js: ['https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.production.min.js','https://cdn.jsdelivr.net/npm/react-router-dom@5.3.0/umd/react-router-dom.min.js','https://cdnjs.cloudflare.com/ajax/libs/history/4.9.0/history.min.js','https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js','https://cdn.bootcdn.net/ajax/libs/redux/4.2.0/redux.min.js','https://cdn.bootcdn.net/ajax/libs/react-redux/8.0.5/react-redux.min.js','https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js','https://cdn.bootcdn.net/ajax/libs/antd/5.1.6/antd.min.js','https://cdn.bootcdn.net/ajax/libs/axios/1.2.5/axios.min.js','https://cdn.bootcdn.net/ajax/libs/ant-design-icons/5.0.1/index.umd.min.js',],css: ['https://cdn.bootcdn.net/ajax/libs/antd/5.1.6/reset.min.css'],}),// 本地环境设为空 防止页面遍历报错{js: [],css: [],})}// 使用gzip压缩超过1M的js和css文件webpackConfig.plugins.push(new CompressionWebpackPlugin({algorithm: 'gzip',test: /\.(js|css)$/,threshold: 1024,minRatio: 0.8,}))return webpackConfig},},plugins: [{plugin: sassResourcesLoader, // 在所有scss文件加载前加载 全局加载到前面options: {// 配置多个文件 传文件的绝对路径resources: [path.resolve(__dirname, 'src', 'styles', 'common.module.scss'),path.resolve(__dirname,'src','styles','global-variables.module.scss'),path.resolve(__dirname, 'src', 'styles', 'antd.module.scss'),],},},],
}
module.exports = config

移动端适配

yarn add postcss-px-to-viewport-8-plugin -D

const PostCssPxToViewportPlugin = require('postcss-px-to-viewport-8-plugin') // 针对postcss8.x版本生效的插件
module.exports = {style: {postcss: {mode: 'extends',loaderOptions: {postcssOptions: {ident: 'postcss',plugins: ['postcss-px-to-viewport-8-plugin',PostCssPxToViewportPlugin({viewportWidth: 375, // 视口宽度viewportUnit: 'vmin', // px转换后的单位fontViewportUnit: 'vmin', // 字体转换后的单位}),],},},},},
}

@craco/craco复写cra项目配置相关推荐

umi权限路由_umi 入门之项目配置
umi 项目配置一.运行配置约定src/app.tsx为运行配置配置项目 1.patchRoutes 修改路由,可获得整个路由系统 export function patchRoutes({ r ...
理解 IntelliJ IDEA 的项目配置和Web部署
点击上方"方志朋",选择"置顶公众号" 技术文章第一时间送达! 作者:dulk cnblogs.com/deng-cc/p/6416332.html 1.项目配 ...
使用Jenkins持续集成Vue项目配置Sonar任务
title: 使用Jenkins持续集成Vue项目配置Sonar任务 tags: jenkins Vue.js Sonar categories: ci date: 2017-12-05 22:09: ...
Radware负载均衡项目配置实战解析之四-VRRP双机配置与同步
接上一小节内容,这一节主要介绍RADWARE负载均衡实战项目中的VRRP双机配置与同步问题.radware在实际的业务与配置中,一般都会配置双机来实现冗余.无论是主用设备还是备用设备都要进行基本配置. ...
CYQ.Data.ProjectTool 项目配置工具发布（包源码）
2019独角兽企业重金招聘Python工程师标准>>> 前言: 一直被网友催,说要更新下 CYQ.Data 的枚举生成器,这工具自从V4.5版本之后,就没再发布过新版本,事实上,我 ...
vue cli 添加html,vue-cli创建的项目,配置多页面的实现方法
vue官方提供的命令行工具vue-cli,能够快速搭建单页应用.默认一个页面入口index.html,那么,如果我们需要多页面该如何配置,实际上也不复杂假设要新建的页面是rule,以下以rule为例 ...
Maven项目配置EL表达式原样输出解决方法
Maven项目配置EL表达式原样输出解决方法参考文章: (1)Maven项目配置EL表达式原样输出解决方法 (2)https://www.cnblogs.com/d191/p/11689610.ht ...
【JetPack】为现有 Android 项目配置视图绑定 ( ViewBinding ) 模块 ( 视图绑定不影响传统布局操作 | 视图绑定类关联 Activity | 视图绑定类本质 )
文章目录 I . 为现有项目配置视图绑定 ( ViewBinding ) 应用 II . 视图绑定 ( ViewBinding ) 定制 III . 视图绑定 ( ViewBinding ) 对于正 ...
java项目配置常见问题
myeclipse配置流程 1.切换编码 genera->workspace->text file encoding->选utf-8 2.配置jdk版本 a.java->ins ...

@craco/craco复写cra项目配置