webpack之Typescript

最新推荐文章于 2025-07-05 00:37:50 发布

原创最新推荐文章于 2025-07-05 00:37:50 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #webpack #javascript

本文介绍了如何在webpack工程中整合TypeScript。首先，需要通过npm安装typescript和ts-loader。接着，配置tsconfig.json文件，这可以通过运行`tsc --init`自动生成。然后，在webpack配置文件中设置模块规则，指定.ts文件使用ts-loader处理，并排除node_modules目录。最后，确保webpack配置中的resolve部分包含.ts和.js扩展名，输出文件为bundle.js。通过这些步骤，你可以成功在webpack项目中使用TypeScript。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack之Typescript

如何在webpack工程化环境中集合TS

需要安装ts和对应的loader

npm install --save-dev typescript ts-loader

接下来需要在项目根目录下添加一个ts的配置文件–tsconfig.json，可以使用ts自带的工具来自动化生成它。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
 mode: 'development',
 //入口
 entry: './src/app.ts',
 devtool: 'inline-source-map',
 
 module: {
  rules : [
   {
    test: /\.ts$/,
    use: 'ts-loader',
    exclude: /node_modules/
   }
  ]
 },
 
 resolve: {
  extensions: ['.ts','.js']
 },
 
 //出口
 output: {
  filename: 'bundle.js',
  path: path.resolve(_dirname, './dist');
 },
 
 plugins: [
  new HtmlWebpackPlugin()
 ]
}

npx tsc --init 
自动会在根目录下面创建出一个tsconfig.json文件