0
# Webpack Configuration
1

2
Main plugin function that configures webpack for TypeScript compilation with performance optimizations including caching, parallel processing, and type checking.
3

4
## Capabilities
5

6
### Main Plugin Function
7

8
Configures webpack to handle TypeScript files with optimization features.
9

10
```javascript { .api }
11
/**
12
 * Main plugin function that configures webpack for TypeScript compilation
13
 * Adds TypeScript loaders, optimizations, and type checking to webpack configuration
14
 * @param api - Vue CLI service API instance with chainWebpack access
15
 * @param projectOptions - Project configuration options including parallel settings
16
 */
17
function plugin(api, projectOptions): void;
18
```
19

20
**Configuration Applied:**
21
- Adds `.ts` and `.tsx` file extension resolution
22
- Sets up TypeScript compilation chain with multiple loaders
23
- Configures fork-ts-checker-webpack-plugin for type checking
24
- Enables performance optimizations based on environment and options
25

26
**Usage Example:**
27

28
```javascript
29
// Applied automatically by Vue CLI when plugin is installed
30
// Manual usage (not typical):
31
const tsPlugin = require('@vue/cli-plugin-typescript');
32
// In vue.config.js
33
module.exports = {
34
  configureWebpack: config => {
35
    // Plugin is applied automatically via Vue CLI plugin system
36
  }
37
};
38
```
39

40
### Webpack Chain Configuration
41

42
The plugin modifies webpack configuration through the Vue CLI's webpack-chain API:
43

44
```javascript { .api }
45
/**
46
 * Webpack configuration modifications applied by the plugin
47
 * These are applied automatically when the plugin is loaded
48
 */
49

50
// Entry point modification (if no pages config)
51
config.entry('app').clear().add('./src/main.ts');
52

53
// Extension resolution
54
config.resolve.extensions.prepend('.ts').prepend('.tsx');
55

56
// Loader configuration
57
config.module.rule('ts').test(/\.ts$/);
58
config.module.rule('tsx').test(/\.tsx$/);
59
```
60

61
### Loader Chain Setup
62

63
Configures the TypeScript loader chain with conditional optimizations:
64

65
```javascript { .api }
66
/**
67
 * Loader configuration function used internally
68
 * @param loaderConfig - Configuration object for a specific loader
69
 * @param loaderConfig.name - Loader identifier
70
 * @param loaderConfig.loader - Loader module path
71
 * @param loaderConfig.options - Loader-specific options
72
 */
73
function addLoader({ name, loader, options }): void;
74
```
75

76
**Loader Chain (in order):**
77
1. **cache-loader** (optional): `cache-loader` for build caching
78
2. **thread-loader** (conditional): Multi-threaded processing when `parallel` option is enabled
79
3. **babel-loader** (conditional): Babel integration when `@vue/cli-plugin-babel` is present
80
4. **ts-loader**: TypeScript compilation with transpile-only mode
81

82
### Cache Configuration
83

84
Build caching configuration for improved performance:
85

86
```javascript { .api }
87
/**
88
 * Cache configuration automatically applied when cache-loader is available
89
 * Caches TypeScript compilation results in node_modules/.cache/ts-loader
90
 */
91
const cacheConfig = {
92
  'ts-loader': 'ts-loader package version',
93
  'typescript': 'typescript package version', 
94
  modern: 'modern build flag'
95
};
96
```
97

98
### Thread Configuration
99

100
Parallel processing configuration for multi-core systems:
101

102
```javascript { .api }
103
/**
104
 * Thread loader configuration applied when parallel option is enabled
105
 * @param projectOptions.parallel - Boolean or number for thread count
106
 */
107
const threadConfig = {
108
  workers: typeof projectOptions.parallel === 'number' 
109
    ? projectOptions.parallel 
110
    : undefined
111
};
112
```
113

114
### TypeScript Loader Options
115

116
Core TypeScript compilation settings:
117

118
```javascript { .api }
119
/**
120
 * TypeScript loader configuration applied to both .ts and .tsx files
121
 */
122
const tsLoaderOptions = {
123
  transpileOnly: true,           // Skip type checking for performance
124
  appendTsSuffixTo: ['\\.vue$'], // Handle Vue SFC TypeScript blocks
125
  happyPackMode: boolean         // Enable when using thread-loader
126
};
127

128
const tsxLoaderOptions = {
129
  // Same as tsLoaderOptions but with:
130
  appendTsxSuffixTo: ['\\.vue$'] // Handle Vue SFC TSX blocks
131
};
132
```
133

134
### Fork TypeScript Checker Configuration
135

136
Off-thread type checking configuration:
137

138
```javascript { .api }
139
/**
140
 * Fork TypeScript checker plugin configuration
141
 * Provides type checking without blocking webpack compilation
142
 */
143
const forkTsCheckerConfig = {
144
  typescript: {
145
    extensions: {
146
      vue: {
147
        enabled: true,
148
        compiler: string // Path to Vue compiler (vue/compiler-sfc or vue-template-compiler)
149
      }
150
    },
151
    diagnosticOptions: {
152
      semantic: true,
153
      syntactic: boolean // Based on useThreads setting
154
    }
155
  }
156
};
157
```
158

159
### Vue Compiler Integration
160

161
Automatic Vue compiler detection and configuration:
162

163
```javascript { .api }
164
/**
165
 * Vue compiler path resolution for different Vue versions
166
 * Automatically detects and configures appropriate compiler
167
 */
168
let vueCompilerPath: string;
169

170
// Vue 2.7+ detection
171
try {
172
  vueCompilerPath = require.resolve('vue/compiler-sfc');
173
} catch (e) {
174
  // Vue 2.6 and lower fallback
175
  vueCompilerPath = require.resolve('vue-template-compiler');
176
}
177
```
178

179
### Environment Configuration
180

181
Environment-specific configuration handling:
182

183
```javascript { .api }
184
/**
185
 * Environment and project-specific configuration
186
 */
187
const environmentConfig = {
188
  useThreads: boolean,           // process.env.NODE_ENV === 'production' && !!projectOptions.parallel
189
  modernBuild: boolean,          // process.env.VUE_CLI_MODERN_BUILD
190
  isTestEnvironment: boolean     // process.env.VUE_CLI_TEST
191
};
192
```
193

194
**Performance Features:**
195
- Parallel processing on multi-core systems via `thread-loader`
196
- Build caching via `cache-loader` 
197
- Off-thread type checking via `fork-ts-checker-webpack-plugin`
198
- Transpile-only mode for faster compilation
199
- Modern build support for differential loading