webpack5 学习（十二）—— webpack 和 TypeScript 进行集成

＊且听风吟

已于 2022-03-09 18:17:54 修改

阅读量903

点赞数

分类专栏： webpack 文章标签： typescript webpack javascript

于 2022-03-09 18:16:19 首次发布

本文链接：https://blog.csdn.net/HH18700418030/article/details/123212426

版权

本文介绍了如何在webpack5项目中集成TypeScript，包括基础配置、tsconfig.json和webpack.config.js的设置、Loader的使用、Source Maps的启用、客户端类型支持、导入第三方库和资源的处理方法。

摘要由CSDN通过智能技术生成

基础配置

首先，安装 TypeScript compiler 和 loader：

npm install --save-dev typescript ts-loader

安装完成：
在这里插入图片描述

tsconfig.json

设置一个基本的配置来支持 JSX，并将 TypeScript 编译到 ES5，新建tsconfig.json：

{
   
  "compilerOptions": {
   
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node"
  }
}

webpack.config.js

修改webpack.config.js：

const path = require('path');

module.exports = {
   
  entry: './src/index.ts',
  module: {
   
    rules: [
      {
   
        test: /\.tsx?$/,
        use: 'ts-loader'</