Vue3.0 + TS + Vite + Webpack actual combat project strongest suit

Generating a project project with VUE-CLI4 is pretty simple right now. I won’t tell you more here. While using the latest vue3.0 + TS technology, the company’s business projects are complex and cannot do without the packaging of Webpack. As we know, vuE-CLI4 scaffolding configures some default Settings for us. So how do you use Vite on top of that?

After installing the [email protected] dependency package, the biggest problem is the path problem. We know that in the vite configuration file vite.config.ts:

alias: {
  '/@/': pathResolve('src')
}
Copy the code

B The alias must start and end with a ‘/’. This conflicts with the existing configuration. If the paths of all reference files are changed to those starting with a ‘/’ (except those using relative paths),

import HelloWorld from '/@/components/HelloWorld.vue'
Copy the code

So the Webpack side is in conflict. And vscode compiler jump recognition errors. The latest RC branch of Vite provides a new API, Resolvers. Resolvers are an enhanced version of Alias and allow you to customize rules.

/** * Resolvers to map dev server public path requests to/from file system paths, * and optionally map module ids to public path requests. */ resolvers? : Resolver[];Copy the code

Vite. Config. Ts file:

const viteConfig: UserConfig = {
 // something
 alias: {
  '/@/': pathResolve('src')
},
 resolvers: [resolveAlias]
}
Copy the code

ResolveAlias implementation:

import type { Resolver } from 'vite';

export const resolveAlias: Resolver = {
  alias: id => {
    if (id.startsWith('@/')) id = '/' + id
    return id
  }
}
Copy the code

So vite and Webpack can play happily, pencil core. In addition, Vite provides extended configurations such as Transforms, plugins, and so on. Achieve more personalized needs. The middleware configuration for vite Dev server, configureServer, is even provided. Therefore, Vite is very friendly to developers in configuration convenience. At this point, finally realize the development environment using Vite, experience faster compilation speed. Production is packaged using Webpack. Can be more reasonable unpacking, better modular and so on.

If there is anything wrong, welcome to correct.