webpack处理ts模块

本节目标：理解“webpack处理ts模块”的核心思路，并能把它用于实际开发或面试表达。

说明：原 OneNote 中有图片引用，但图片未包含在导出目录中；本页保留了可用的文字与代码内容。 TypeScript 是 JavaScript 的超集，为其增加了类型系统，可以编译为普通的 JavaScript 代码。这篇指南里我们将会学习 webpack 是如何跟 TypeScript 进行集成。

基础安装首先，执行以下命令，安装 TypeScript 编译器(compiler)和 loader： npm install--save-dev typescript ts-loader==== 现在，我们将修改目录结构和配置文件： project

tsconfig.json
这里我们设置一个基本的配置，来支持 JSX，并将 TypeScript 编译到 ES5……
{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  }
}
查看 [TypeScript](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) 官方文档了解更多关于 tsconfig.json 的配置选项。

现在让我们在 webpack 配置中处理 TypeScript：
webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

这会直接将 webpack 的入口起点指定为 ./index.ts，然后通过 ts-loader 加载_所有的 .ts 和 .tsx _文件，并且在当前目录_输出_一个 bundle.js 文件。 Loader

ts-loader 在本指南中，我们使用 ts-loader，因为它能够很方便地启用额外的 webpack 功能，例如将其他 web 资源导入到项目中。

source map 想要了解 source map 的更多信息，请查看开发指南。要启用 source map，我们必须配置 TypeScript，以将内联的 source map 输出到编译过的 JavaScript 文件。必须在 TypeScript 配置中添加下面这行： tsconfig.json

现在，我们需要告诉 webpack 提取这些 source map，并内联到最终的 bundle 中。
webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/index.ts',
  ==devtool:== =='inline-source-map'====,==
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
查看 [devtool](https://www.webpackjs.com/configuration/devtool/) 文档以了解更多信息。

使用第三方库当从 npm 安装第三方库时，一定要牢记同时安装这个库的类型声明文件。你可以从 TypeSearch 中找到并安装这些第三方库的类型声明文件。举个例子，如果想安装 lodash 这个库的类型声明文件，我们可以运行下面的命令： npm install--save-dev @types/lodash 想了解更多，可以查看这篇文章。

导入其他资源
要在 TypeScript 里使用非代码资源，我们需要告诉 TypeScript 如何兼容这些导入类型。那么首先，我们需要在项目里创建 custom.d.ts 文件，这个文件用来编写自定义的类型声明。让我们将 .svg 文件进行声明设置：
custom.d.ts
declare module "*.svg" {
  const content: any;
  export default content;
}

这里，我们通过指定任何以 .svg 结尾的导入，并将模块的 content 定义为 any，将 SVG 声明一个新的模块。我们可以通过将类型定义为字符串，来更加显式地将它声明为一个 url。同样的理念适用于其他资源，包括 CSS, SCSS, JSON 等。

构建性能 这可能会降低构建性能。 关于构建工具，请查看构建性能指南。

原文： [https://webpack.js.org/guides/typescript/](https://webpack.js.org/guides/typescript/)

> 来自

 <https://www.webpackjs.com/guides/typescript/>

webpack处理ts模块 ​

webpack处理ts模块