craco学习: CRA 程序的自定义配置，安装到项目
创建React应用程序配置覆盖，这是创建React应用程序的一个简单易懂的配置层
react-script@5 配置
# 安装 alpha 基本可以用
yarn add @craco/craco@alpha --dev
# 6.x 的版本不适用于 react-script@5
# 确认是这个版本: "version": "7.0.0-alpha.7"，小版本号可以忽略添加一个 banner 插件
- 在项目根目录下添加: craco.config.js
- 安装 banner 插件
const HtmlBannerWebpackPlugin = require('@jswork/html-banner-webpack-plugin');
module.exports = {
webpack: {
plugins: [
new HtmlBannerWebpackPlugin({
banner: [
'NAME: moban-admin',
'VERSION: v1.1.5-alpha.6',
'BUILD_TIME: 4/12/2019, 11:01:20 PM',
],
}),
],
},
};安装
从
npm安装
# 从 yarn 安装
yarn add @craco/craco --dev
# OR npm 安装
npm install @craco/craco -D目录结构如下
添加配置文件
craco.config.js到项目根目录
my-app
├── node_modules
├── craco.config.js
└── package.json对 package.json 文件进行修改
修改 react-scripts 为 craco
/* package.json */
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "craco eject"
}自己的定制 craco.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
// The Webpack config to use when compiling your react app for development or production.
webpack: {
alias: {
'@': path.join(__dirname, 'src')
},
plugins: [
new webpack.ProvidePlugin({
React: 'react',
ReactDOM: 'react-dom'
})
]
}
};