create-react-app中的一些功能配置

1. 根路徑別名@

 1. npm run eject調出配置文件。找到webpack.config.js，搜索到，alias，在下面添加一行鍵值對'@':paths.appSrc,

      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 || {}),
        '@':paths.appSrc,//ps:appSrc變量是該腳手架中已存在，可直接使用
      },

2. 使用index.module.scss(scss+樣式模塊化)

  開始百度搜索怎么在create-react-app中使用scss模塊化，結果安裝完scss直接可以使用了，無需改動配置，人家幫你配置好了，真方便。。

直接安裝  npm i node-sass sass-loader
然后就可以這么用了:

import styles from  './index.module.scss';

...

<header className={styles.header}>

3.異步加載組件

npm install --save react-loadable

// 1.引入
import loadable from 'react-loadable';
import Loading from '@/components/Loading';
// import Index from '@/pages/Index';
// import IndexSort from '@/pages/IndexSort';

// 2.改造引入組件的方式
const Index = loadable({
  loader:()=>import('@/pages/Index'),
  loading:Loading,
});
const IndexSort = loadable({
  loader:()=>import('@/pages/IndexSort'),
  loading:Loading,
});

// 3.直接使用改造之后的組件

　　{

      path: '/',

      exact:true,

      component: Index,

    },

    {

      path: '/index-sort',

      component: IndexSort,

    },

4.配置靜態資源目錄

在package.json中添加

"homepage"："."

 5.使用antd，按需加載

1. 調出配置文件

npm run eject

2.安裝babel-plugin-import
npm -s install babel-plugin-import

3.在webpack.config.js中找到babel-loader，在options中的plugins的數組中添加一個成員

   [
　　require.resolve('babel-plugin-import'),// 導入 import 插件
 　　{
 　　　　libraryName: 'antd',   //暴露antd
　　　　 style: 'css'
　　}
  ]

 

更新中...