使用 create-react-app
生成项目,不会有 webpack
的配置项,要导出 webpack
,必须使用 react-script eject
,但这是一个单向操作,eject
后,就无法恢复了。如果只是修改一些简单的配置,eject
是没有必要的。
1、使用 react-app-rewired
包替换 react-script
react-app-rewired@^2.0.0+
版本需要搭配customize-cra
使用
# https://www.npmjs.com/package/react-app-rewired
# https://www.npmjs.com/package/customize-cra
$ npm i react-app-rewired -D
$ npm i customize-cra -D
复制代码
2、在项目根目录创建 config-overrides.js
3、使用 react-app-rewired
配置 alias
# ./config-overrides.js
const { override, addWebpackAlias } = require('customize-cra')
const path = require('path')
const resolve = dir => path.join(__dirname, '.', dir)
module.exports = override(
addWebpackAlias({
['@']: resolve('src')
})
)
复制代码
4、添加 react-hot-reloader
# https://www.npmjs.com/package/react-hot-loader
# https://github.com/cdharris/react-app-rewire-hot-loader
$ npm i react-hot-loader -D
$ npm i react-app-rewire-hot-loader -D
复制代码
5、修改 config-overrides.js
# https://github.com/arackaf/customize-cra/issues/54
# ./config-overrides.js
const { override, addWebpackAlias } = require('customize-cra')
const path = require('path')
const resolve = dir => path.join(__dirname, '.', dir)
module.exports = override(
addWebpackAlias({
['@']: resolve('src')
}),
(config, env) => {
config = rewireReactHotLoader(config, env)
return config
}
)
复制代码
6、在根组件处开启 react-hot-reloader
# ./App.jsx
import { hot } from 'react-hot-loader/root'
...
...
...
export default process.env.NODE_ENV === 'development' ? hot(App) : App;
复制代码
7、引入 antd
按需加载
+ const { override, fixBabelImports, addWebpackAlias } = require('customize-cra')
const rewireReactHotLoader = require('react-app-rewire-hot-loader')
const path = require('path')
const resolve = dir => path.join(__dirname, '.', dir)
module.exports = override(
+ fixBabelImports('import', {
+ libraryName: 'antd',
+ libraryDirectory: 'es',
+ style: 'css'
+ }),
addWebpackAlias({
['@']: resolve('src')
}),
(config, env) => {
config = rewireReactHotLoader(config, env)
return config
}
)
复制代码