使用 eject 擴充套件 webpack

前言

本文基於 (“react”: “^16.13.1”) 版本
react官方腳手架預設是將webpack配置隱藏起來了，在進行配置之前需要將webpack給暴露出來。

1.輸入命令 npm run eject

會出現一個命令提示：這是一個單向操作，確認操作後不可逆轉/返回?
輸入 y 回車
成功之後 在專案根目錄出現 config 資料夾

2.開啟 config 資料夾下的 webpack.config.js 檔案

3.進行搜尋 alias ,大概在 291 行的位置

4.參照如下格式，設定路徑別名

alias: {
    // Support React Native Web
    // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
    'react-native': 'react-native-web',
    // Allows for better profiling with ReactDevTools
    ...(isEnvProductionProfile && {
      'react-dom$': 'react-dom/profiling',
      'scheduler/tracing': 'scheduler/tracing-profiling',
    }),
    ...(modules.webpackAliases || {}),
    // 檔案路徑別名
    '@': path.resolve(__dirname, '../src'),
    '@view': path.resolve(__dirname, '../src/view'),
  },
 

5.在專案中使用

開啟 index.js ,將 import ./index.css 替換成 import '@/index.css’
注： @ 在上面已經被設定 src 檔案路徑

6.啟動專案， 無報錯，並且樣式生效

react 不eject擴充套件webpack

使用 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

然後在 package.json 檔案中將 script 的配置項替換成如下

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  }
 

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
  }
)

轉自：

• react 不eject擴充套件webpack

• react 設定檔案路徑別名