antd按需加载_antd vue按需加载 - CSDN
  • 我目前使用的antd版本是2.13。现在最新的是3.0.1。 脚手架工具就是create-react-app。创建完成项目后,添加配置,执行yarn eject 也就是打开配置的文档。 找到config文件夹。里面有2个配置文档, webpack....

    我目前使用的antd版本是2.13。现在最新的是3.0.1。
    脚手架工具就是create-react-app。创建完成项目后,需添加配置,执行yarn eject 也就是打开配置的文档。
    然后安装第三方依赖yarn add babel-plugin-import --save-dev
    找到config文件夹。里面有2个配置文档,
    webpack.config.dev.js和webpack.config.prod.js
    添加配置时一定要保持文档的一致性。我就是犯了错误,值配置了开发的没有配置正式文档导致错误。
    首先打开webpack.config.dev.js
    在147行添加这段代码

    plugins: [
                           ['import', [{ libraryName: "antd", style: 'css' }]],
                        ],

    这里写图片描述
    同样的配置在webpack.config.prod.js里面也需要添加。
    这里写图片描述

    这样就真正实现了按需加载,就不会再报黄色的警告。

    还有第二种简单的方式,就是在package.json里面直接添加这行代码。当然前提也是需要先安装依赖:yarn add babel-plugin-import --save-dev

    "babel": {
        "presets": [
          "react-app"
        ],
        "plugins": [
          [
            "import",
            {
              "libraryName": "antd",
              "style": "css"
            }
          ]
        ]
    
    
      },
    展开全文
  • 先安装babel-plugin-import、customize-cra和react-app-rewired 在package.json中修改为 "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired ...

    先安装babel-plugin-importcustomize-crareact-app-rewired

    在package.json中修改为

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

    在项目根目录下创建config-overrides.js

    const { override, fixBabelImports, addWebpackAlias } = require('customize-cra');
    const path = require("path");
    module.exports = override(
        fixBabelImports('pc', {
            libraryName: 'antd',
            libraryDirectory: 'es',
            style: 'css',
            // style: true, //主题才能生效
        }),
    );
    
    展开全文
  • antD按需加载配置报错问题解决 最近学习搭建react项目,在做antD按需加载时报错 yarn add less yarn add less-loader 通过命令yarn eject,暴露出webpack文件 解决办法: 在config->webpack.config.js中添加,对照...

    antD按需加载配置报错问题解决

    最近学习搭建react项目,在做antD按需加载时报错

    yarn add less

    yarn add less-loader

    通过命令yarn eject,暴露出webpack文件

    解决办法:
    在config->webpack.config.js中添加,对照sass变量的定义,写less

    1 const lessRegex=/\.less$/
     2 const lessModuleRegex=/\.module\.less$/
     3 
     4 {
     5   test: lessRegex,
     6   exclude: lessModuleRegex,
     7   use: getStyleLoaders(
     8     {
     9       importLoaders: 3,
    10       // sourceMap: isEnvProduction && shouldUseSourceMap,
    11       sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
    12     },
    13     'less-loader'
    14   ),
    15   sideEffects: true,
    16 },
    17 {
    18   test: lessModuleRegex,
    19   use: getStyleLoaders(
    20     {
    21       importLoaders: 3,
    22       // sourceMap: isEnvProduction && shouldUseSourceMap,   
    23       sourceMap:isEnvProduction?shouldUseSourceMap:isEnvDevelopment,  
    24       modules: true,
    25       getLocalIdent: getCSSModuleLocalIdent,
    26     },
    27     'less-loader'
    28   ),
    29 },
    

    保存配置,然后

    yarn add babel-plugin-import

    package.json

    "babel": {
      "presets": [
        "react-app"
      ],
      "plugins": [
        [
          "import",
          {
            "libraryName": "antd",
            "style": "css"
          }
        ]
      ]
    }
    

    webpack.config.js

    {
      test: /\.(js|mjs|jsx|ts|tsx)$/,
      include: paths.appSrc,
      loader: require.resolve('babel-loader'),
      options: {
        customize: require.resolve(
          'babel-preset-react-app/webpack-overrides'
        ),
    
        plugins: [
          [
            require.resolve('babel-plugin-named-asset-import'),
            {
              loaderMap: {
                svg: {
                  ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
                },
              },
            },
          ],
          ['import', { libraryName: 'antd', style:"css" }],
        ],
        cacheDirectory: true,
        cacheCompression: isEnvProduction,
        compact: isEnvProduction,
      },
    },
    

    转自:https://www.cnblogs.com/ronle/p/10651821.html 感谢原作者

    展开全文
  • 安装core-loader npm i core-loader --save-dev 在webpack配置文件中引入core-loader rules: [ { test: /\.(js|jsx)$/, use: [ { loader: 'babel-loader' }, { loader: 'core-loader' }, ... },

    安装core-loader

    npm i core-loader --save-dev
    

    在webpack配置文件中引入core-loader

    rules: [
          {
            test: /\.(js|jsx)$/,
            use: [
              { loader: 'babel-loader' },
              { loader: 'core-loader' },
            ],
          },
    展开全文
  • antd按需加载

    2020-01-06 19:17:44
    如果没有按需加载,我们如果想要使用一个标签,比如Button,需要导入js和css文件,使用起来不是很方便,而且还会造成性能上面的一个下降,先来看一下正常版本的使用 import React from 'react'; import { ...
  • antd按需加载配置过程

    2019-06-04 11:01:28
    antd按需加载配置过程安装模块修改 package.json 里的启动配置项目根目录创建一个 config-overrides.js 用于修改默认配置。重启启动项目解决办法:将 react-scripts添加到依赖中 安装模块 yarn add react-app-...
  • 实现Ant Design按需加载

    2020-03-04 22:42:38
    首先安装babel-plugin-import: npm i babel-plugin-import -S 然后在.babelrc中添加如下代码: // .babelrc or babel-loader option ... ["import", { libraryName: "antd-mobile", style: "css" }] // `styl...
  • 1.安装 react-app-rewired customize-cra yarn add react-app-rewired customize-cra 2.修改package.json /* package.json 的配置需要做如下修改*/ "scripts": { - "start": "react-scripts start", //默认脚手架...
  • 今天在配置antd按需加载的时候,遇到一问题,估计因为项目周期的原因,也就项目开始的时候配置一下,所以很多时候容易忘记,特此整理一下 误区,antd按需加载同样是需要先安装antd,只是通过插件的配置实现不用再...
  • antd按需加载使用时,引用babel-plugin-import插件时项目报错,解决方案如下: (1)引入将less安装版本降至3.0以下版本,2.7.3 yarn add less@2.7.3 (2)修改webpack.config.js文件中babel-loader配置 修改内容...
  • Antd按需加载

    2020-06-01 16:50:44
    Antd按需加载(rewired)安装Rewired的模块修改package.js配置文件在根目录创建文件 config-overrides.js引入组件按需加载 安装Rewired的模块 yarn add antd react-app-rewired customize-cra babel-plugin-import...
  • 误区,antd按需加载同样是需要先安装antd,只是通过插件的配置实现不用再进行样式的引入,可以直接引用antd组件进行开发 怎样判断按需加载配置成功?通过组件引用的判断,在不引入antd样式的前提下,直接引入,使用...
  • Antd按需加载(React)

    2019-09-20 10:08:02
    Antd配置按需加载(React)
  • react集成webpack4和antd(按需加载,支持配置主题)
  • 第一步暴露配置: $ yarn eject ...第二步实现antd按需加载: $ yarn add babel-plugin-import 修改package.json "babel": { "presets": [ "react-app" ], "plugins": [ [ "import", { ...
  • React之antd按需加载

    2018-05-23 16:41:04
    虽然antd官网有提供按需加载的方法:但这种方法需要执行eject命令,而eject是不可逆的,会更改package文件,并且将所有的依赖都暴露在外面。我将自己的项目eject后,找不到package.json无法启动。找到了别人不通过...
  • 1、在根目录下的package.json下的bable中添加相应代码 "babel": { "presets": [ "react-app" ], "plugins": [ [ "import", { "libraryName": "antd", "libraryDirect...
  • 1. 创建react项目 2. 引入antd // cnpm i antd -S 3.
  • 前提:通过NPM或者yarn…安装babel-plugin-import的包 1.config/webpack.config.dev.js ...[require.resolve('babel-plugin-import'), { libraryName: 'antd', style: 'css' }] 参考:https://b...
  • nextjs整合redux、typescript、antd按需加载案例步骤:(如有侵权,可以留言,
1 2 3 4 5 ... 20
收藏数 5,675
精华内容 2,270
关键字:

antd按需加载