react執行yarn eject後配置antd的按需加載

第一步: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

相關文章
相關標籤/搜索