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'
　　}
  ]

 

更新中...