1. Install the required plug-ins

1.1 ts-import-plugin

NPM I ts-import-plugin-d Since we use typescript, we don’t need the babel-plugin-import plugin

1.2 webpack-merge

npm i webpack-merge --save-dev

2, invue.config.jsTo configure

const tsImportPluginFactory = require('ts-import-plugin')
const { merge } = require('webpack-merge')

module.exports = {
	chainWebpack(config) {
    // Configure VantUI to be imported on demand
    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
      })
   }   
}
Copy the code

3. Possible problems

3.1 ERROR TypeError: merge is not a function

This error is caused by the introduction of Webpack-merge without destruct assignment (already dented)

3.2 ERROR TypeError: Cannot read property 'tapPromise' of undefined

This error occurs if you have the compression-webpack-plugin installed in version 7.0.0 or later. The solution was to downgrade the plug-in, which I dropped to 6.0.2