Crawler

批改CRA我的项目的配置应用create-react-app 创立的我的项目默认是无奈批改其外部的webpack配置的，不像vue-cli那样能够通过一个配置文件批改。 尽管有一个eject 命令能够是将配置齐全裸露进去，但这是一个不可逆的操作，同时也会失去CRA带来的便当和后续降级。 如果想要无 eject 重写 CRA 配置，目前成熟的是上面这几种形式 通过 CRA 官网反对的 --scripts-version 参数，创立我的项目时应用本人重写过的 react-scripts 包应用 react-app-rewired + customize-cra 组合笼罩配置应用 craco 笼罩配置这里我抉择的是craco 装置 装置依赖 yarn add @craco/craco复制代码批改pacage.json中的命令 { "scripts":{ "start": "craco start", "build": "craco build", "test": "craco test" }} 复制代码在根目录创立craco.config.js配置文件 /* craco.config.js */module.exports = { // ... webpack: {}, babel: {},}复制代码根底的配置到此实现了，接下来是解决各种配置的笼罩，残缺的 craco.config.js 配置文件构造，能够在 craco 官网的文档中具体查问：Configuration File 。 留神！ 目前的craco最新版本v6.4.3仅反对cra4创立的我的项目 构建体积剖析首先引入了webpack-bundle-analyzer 这个插件来剖析一下构建产物的组成 /* craco.config.js */const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); module.exports = { webpack: { plugins: [ new BundleAnalyzerPlugin({ analyzerMode: 'server', analyzerHost: '127.0.0.1', analyzerPort: 8888, openAnalyzer: true, // 构建完关上浏览器 reportFilename: path.resolve(__dirname, `analyzer/index.html`), }), ], }}复制代码在应用yarn build命令打包后，就能够失去一个剖析图，蕴含了每个chunk的组成部分。 ...