react执行yarn eject后配置antd的按需加载

时间 2019-11-11

标签 react 执行 yarn eject 配置 antd 按需加载栏目 React 繁體版

原文原文链接

第一步：javascript

用create-react-app建立完成项目后，执行yarn eject 。在config文件夹会显示配置文档css

第二步：java

添加插件yarn add babel-plugin-import --save-dev yarn add antd --save-dev node

第三步：在congif文件夹下webpack.config.dev.js第147行添加代码react

 options: {
   +        plugins: [
   +             ['import', [{ libraryName: "antd", style: 'css' }]],
   +          ],
              // This is a feature of `babel-loader` for webpack (not Babel itself).
              // It enables caching results in ./node_modules/.cache/babel-loader/
              // directory for faster rebuilds.
              cacheDirectory: true,
            },

　第四步：在config文件下webpack.config.prod.js第154行添加webpack

 options: {
 +        plugins: [
 +             ['import', [{ libraryName: "antd", style: 'css' }]],
 +         ],
              compact: true,
            },

　　第五步：在页面引入antdweb

import { Button } from 'antd';

　　按需加载完毕babel