35 | 如何自定义Webpack和Babel配置

按需加载

 

 

 

 

问题：

样式导入缓存less后报错

 

解决：

注意看报错信息里有issue，进去找到相关报错的位置：.bezierEasingMixin()

看到点赞最多的应该是比较靠谱的解决方法

在到vue cli的官网去找到相关的设置方法

进行相应设置

antd组件和样式按需加载

 

通过babel按需只加载多个用到的组件

 

babel.config.js:

module.exports = {

  presets: ["@vue/app", "@vue/babel-preset-jsx"],

  plugins: [

    [

      "import",

      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }

    ] // `style: true` 会加载 less 文件

  ]

};

当导入组件时，自动转换成通过手动组件导入和组件样式导入的2行代码

import {
  Button,
  Layout
} from "ant-design-vue";

PS:使用按需加载，需要安装"babel-plugin-import": "^1.11.0"

重启服务，刷新页面，大小为4M，按需加载ok