Webpack 集成 TypeScript实际项目通常需要把多个模块、样式和资源打包成浏览器可以加载的文件。Webpack 负责构建和打包TypeScript 负责类型检查和编译两者可以通过ts-loader集成。一、Webpack 在项目中的作用Webpack 可以完成从入口文件开始分析依赖。编译和处理 TypeScript 文件。合并多个模块。生成浏览器可以加载的输出文件。启动开发服务器并提供实时开发体验。清理旧的构建结果并自动生成 HTML 文件。基本流程src/index.ts ↓ ts-loader 编译 TypeScript ↓ Webpack 分析依赖并打包 ↓ dist/bundle.js二、初始化项目mkdirts-webpackcdts-webpacknpminit-y三、安装依赖npminstall--save-dev webpack webpack-cli webpack-dev-server typescript ts-loader html-webpack-plugin clean-webpack-plugin各依赖的作用依赖作用webpack核心构建工具webpack-cliWebpack 命令行工具webpack-dev-server开发服务器typescriptTypeScript 编译器ts-loader在 Webpack 中处理 TypeScripthtml-webpack-plugin自动生成 HTML 文件clean-webpack-plugin构建前清理输出目录注意Webpack 配置中如果使用了html-webpack-plugin安装命令中也必须包含这个依赖。四、创建项目结构ts-webpack/ ├── src/ │ └── index.ts ├── dist/ ├── package.json ├── tsconfig.json └── webpack.config.js创建源文件// src/index.tsconstmessage:stringHello Webpack and TypeScript;console.log(message);五、配置 tsconfig.json{compilerOptions:{target:ES2015,module:ES2015,strict:true}}Webpack 会负责最终打包TypeScript 主要负责类型检查和把 TS 代码转换为 JavaScript。六、配置 webpack.config.jsconstpathrequire(path);constHtmlWebpackPluginrequire(html-webpack-plugin);const{CleanWebpackPlugin}require(clean-webpack-plugin);module.exports{mode:development,entry:./src/index.ts,devtool:inline-source-map,devServer:{static:{directory:path.resolve(__dirname,dist)},open:true},output:{path:path.resolve(__dirname,dist),filename:bundle.js},resolve:{extensions:[.ts,.js]},module:{rules:[{test:/\.ts$/,use:ts-loader,exclude:/node_modules/}]},plugins:[newCleanWebpackPlugin(),newHtmlWebpackPlugin({title:TypeScript 测试})]};七、配置说明1. entryentry是打包入口entry:./src/index.tsWebpack 会从入口文件开始递归分析它依赖的其他模块。2. outputoutput用于配置打包结果output:{path:path.resolve(__dirname,dist),filename:bundle.js}path必须是绝对路径filename是输出文件名。3. resolve.extensionsresolve.extensions允许导入模块时省略扩展名resolve:{extensions:[.ts,.js]}配置后可以写import{add}from./utils/add;而不必写完整的./utils/add.ts。4. module.rulesmodule.rules用于指定不同文件的处理方式{test:/\.ts$/,use:ts-loader,exclude:/node_modules/}这表示匹配.ts文件并交给ts-loader处理同时排除依赖目录。5. plugins插件用于完成模块转换之外的额外任务CleanWebpackPlugin清理旧的dist文件。HtmlWebpackPlugin自动创建 HTML 并引用打包结果。八、配置 npm scripts在package.json中添加{scripts:{build:webpack,start:webpack serve}}九、执行构建生产或普通构建npmrun build启动开发服务器npmstart开发服务器会根据配置启动服务并在源代码变化后重新构建。十、Webpack 和 tsc 的关系工具主要职责tsc类型检查、单独编译 TypeScriptts-loader在 Webpack 流程中调用 TypeScriptwebpack分析依赖并打包webpack-dev-server提供开发服务器和重新构建Webpack 项目中仍然建议保留tsconfig.json因为ts-loader会读取其中的编译配置。十一、常见问题1. 找不到 html-webpack-plugin如果配置中写了constHtmlWebpackPluginrequire(html-webpack-plugin);就必须安装npminstall--save-dev html-webpack-plugin2. webpack-dev-server 配置字段不兼容不同版本的开发服务器配置可能不同。较新的版本通常使用devServer:{static:{directory:path.resolve(__dirname,dist)}}如果项目使用旧版本需要按照对应版本文档调整配置。3. 类型错误仍然导致构建失败ts-loader会处理 TypeScript 编译和类型检查。出现类型错误时应根据终端提示修复类型问题而不是直接删除类型声明。十二、本章小结Webpack 负责模块依赖分析和打包。ts-loader负责在 Webpack 中处理 TypeScript。entry、output、module.rules和plugins是核心配置。html-webpack-plugin和clean-webpack-plugin可以简化 HTML 生成和目录清理。Webpack 项目仍然需要tsconfig.json。