在vuecli3中使用了vant，配置vant的按需引入，

因为项目还使用了typescript，所以配置参考官网，下载ts-import-plugin和webpack-merge，具体配置(vue.config.js)如下：

const merge = require("webpack-merge");
const tsImportPluginFactory = require("ts-import-plugin");

module.exports = {
  lintOnSave: true,
  chainWebpack: config => {
    config.module
      .rule("ts")
      .use("ts-loader")
      .tap(options => {
        options = merge(options, {
          transpileOnly: true,
          getCustomTransformers: () => ({
            before: [
              tsImportPluginFactory({
                libraryName: "vant",
                libraryDirectory: "es",
                style: true
              })
            ]
          }),
          compilerOptions: {
            module: "es2015"
          }
        });
        return options;
      });
  }
};

接着可以在代码(main.ts)中引入组件

import { Button } from 'vant'
Vue.use(Button)

进行到这里，就可以进行开发了

<van-button type="default">默认按钮</van-button>

问题：

这样按需引入组件在开发中没有任何问题，可是打包的时候，只打包了自定义的样式，vant组件的样式没有打包

解决：

在配置文件中，加入配置（parallel: false,），完整配置如下：

const merge = require("webpack-merge");
const tsImportPluginFactory = require("ts-import-plugin");

module.exports = {
  parallel: false,
  lintOnSave: true,
  chainWebpack: config => {
    config.module
      .rule("ts")
      .use("ts-loader")
      .tap(options => {
        options = merge(options, {
          transpileOnly: true,
          getCustomTransformers: () => ({
            before: [
              tsImportPluginFactory({
                libraryName: "vant",
                libraryDirectory: "es",
                style: true
              })
            ]
          }),
          compilerOptions: {
            module: "es2015"
          }
        });
        return options;
      });
  }
};