react 不eject扩展webpack

栏目: JavaScript · 发布时间: 6年前

内容简介:使用

使用 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
  }
)
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

长尾理论

长尾理论

[美] 克里斯·安德森 / 乔江涛 / 中信出版社 / 2006-12 / 35.00元

书中阐述,商业和文化的未来不在于传统需求曲线上那个代表“畅销商品”(hits)的头部; 而是那条代表“冷门商品”(misses)经常为人遗忘的长尾。 举例来说, 一家大型书店通常可摆放10万本书,但亚马逊网络书店的图书销售额中,有四分之一来自排名10万以后的书籍。这些“冷门”书籍的销售比例正以高速成长,预估未来可占整体书市的一半。 这意味着消费者在面对无限的选择时,真正想要的东西、和想要取得......一起来看看 《长尾理论》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

在线进制转换器
在线进制转换器

各进制数互转换器

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具