Webpack的ts的配置详细教程

前言

hello world欢迎来到前端的新世界

---

😜当前文章系列专栏：webpack
🐱‍👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)🌹
💖感谢大家支持！您的观看就是作者创作的动力

ts是什么？

TypeScript 是 JavaScript 的超集，为其增加了类型系统，可以编译为普通 JavaScript 代码。这篇指南里我们将会学习是如何将 webpack 和TypeScript 进行集成。

感兴趣的可以去看
ts的介绍以及ts和js的区别

基础配置

首先，执行以下命令安装 TypeScript compiler 和 loader：

npm install --save-dev typescript ts-loader

现在，我们将修改目录结构和配置文件：

project

  webpack-demo|- package.json|- package-lock.json
+ |- tsconfig.json|- webpack.config.js|- /dist|- bundle.js|- index.html|- /src|- index.js
+   |- index.ts|- /node_modules

tsconfig.json

这里我们设置一个基本的配置来支持 JSX，并将 TypeScript 编译到 ES5……

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

现在，配置 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 文件。

现在让我们改变lodash在 ./index.ts 文件中的引入， 因为在 lodash 的定义中没有默认(default)的导出。

./index.ts

- import _ from 'lodash';
+ import * as _ from 'lodash';function component() {const element = document.createElement('div');element.innerHTML = _.join(['Hello', 'webpack'], ' ');return element;}document.body.appendChild(component());

Tip
如果想在 TypeScript 中保留如import _ from ‘lodash’;的语法被让它作为一种默认的导入方式，需要在文件 tsconfig.json 中设置 “allowSyntheticDefaultImports” : true 和 “esModuleInterop” : true 。这个是与 TypeScript 相关的配置，在本文档中提及仅供参考。

Loader

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

Warning
​ ts-loader​ 使用 TypeScript 编译器 tsc ，并依赖于您的 ​tsconfig.json​ 配置文件。请确保避免将"module"设置为"CommonJS"，否则Webpack将无法进行代码摇树优化（tree-shaking）

请注意，如果您已经在使用​ babel-loader​ 来转译您的代码，您可以使用​ @babel/preset-typescript​ 来让Babel处理您的JavaScript和TypeScript文件，而无需使用额外的加载器。请记住，与ts-loader相反，底层的 @babel/plugin-transform-typescript​ 插件不会执行任何类型检查。

Source Maps

想要启用 source map，我们必须配置 TypeScript，以将内联的 source map 输出到编译后的 JavaScript 文件中。必须在 TypeScript 配置中添加下面这行：

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

现在，我们需要告诉 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'),},};

Client types

你可以在 TypeScript 代码中使用 webpack 特定的特性，比如 import.meta.webpack。并且 webpack 也会为它们提供类型支持，只需要添加一个 TypeScript reference 声明：

/// <reference types="webpack/module" />
console.log(import.meta.webpack); // 没有上面的声明的话，TypeScript 会抛出一个错误

使用第三方类库

在从 npm 安装 third party library(第三方库) 时，一定要记得同时安装此 library 的类型声明文件(typing definition)。你可以从 TypeSearch 中找到并安装这些第三方库的类型声明文件。

举个例子，如果想安装 lodash 类型声明文件，我们可以运行下面的命令：

npm install --save-dev @types/lodash

导入其他资源

想要在 TypeScript 中使用非代码资源(non-code asset)，我们需要告诉 TypeScript 推断导入资源的类型。在项目里创建一个 ​custom.d.ts​ 文件，这个文件用来表示项目中 TypeScript 的自定义类型声明。我们为 .svg 文件设置一个声明：
custom.d.ts

declare module '*.svg' {const content: any;export default content;
}

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

后言

创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力