插件按需引入

vue项目中使用了UI框架 ant-design-vue ，因为开始尝试vue3.0,因为有些不熟悉，在使用使用了vue2.0的方式没成功，所以浪费了很长时间，最后发现是个人疏忽导致的，所以记录一下，以防之后遇到同样的问题。

官方方式 .babelrc文件

在vue3.0如何引入ant-design-vue，我在ant-design-vue官方网站看到了，但是说明有问题。

我引入了babel-plugin-import插件，但是页面仍旧提示引入该插件，然后babel-plugin-import官网介绍说是使用.babelrc文件，但是尝试不成功

babel.config.js

而且在vue2.x中我使用的是babel.config.js，并且vue3.0脚手架生成的也是babel.config.js，所以感觉babel-plugin-import插件里说的使用.babelrc文件不适用，还是使用了babel.config.js

babel.config.js

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      //按需加载js
      "import",
      {libraryName: "ant-design-vue", libraryDirectory: "es", style: true}
    ],
  ],
  env: {
    test: {
      presets: [['@babel/preset-env', { targets: { node: 'current' } }]]
    }
  }
};

最后通过查找与尝试，发现是vue.config.js文件的配置问题。
因为本次没有需要特殊设置的，所以也没有添加该文件，自然就缺少了配置。
主要是其中关于css中的配置，添加后发现该警告消失

module.exports = {
.......

css: {
    //是否使用css分离插件 ExtractTextPlugin 开启CSS分离之后每个组件的css会单独打包，造成页面上有大量请求，所以在正式环境中将CSS分离关闭
    extract: IS_PROD ? true : false,// 是否将组件中的 CSS 提取至一个独立的 CSS 文件中
    sourceMap: false,// 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能
    // requireModuleExtension: false,// 启用 CSS modules for all css / pre-processor files.
    loaderOptions: { //css预设器配置项
        // 向 CSS 相关的 loader 传递选项
        less: {
            // javascriptEnabled: true
        }
    }
}
}