前言
typescript-webpack-plugin 是一个能够在 webpack 编译过程中自动完成 TypeScript 编译的插件。将 TypeScript 代码转换为 JavaScript 代码后，会在输出目录中生成对应的 .js 和 .map 文件，同时还能把编译错误和警告信息直接显示在终端和浏览器控制台中。
本文将详细讲解 typescript-webpack-plugin 的安装和使用，并提供一些示例代码，帮助你更好地上手该插件。
安装
在使用 typescript-webpack-plugin 之前，需要先为项目安装 webpack 和 ts-loader，然后再安装 typescript-webpack-plugin。在项目根目录下运行以下命令：
npm install webpack ts-loader typescript typescript-webpack-plugin --save-dev
配置
在 webpack 的配置文件中，通过 plugins 属性来设置 typescript-webpack-plugin 插件，示例代码如下：
-- -------------------- ---- -------
----- - ------------------- - - -----------------------------------------
----- ----------------------- - -------------------------------------
-- ------- ----
----- ------------- - -
-- -----
------- -
------ -
-
----- ----------
---- -
-
------- ------------
-------- -
-------------- ----- -- -------------------
-- -- ------------- ---
----------- ----------------------- -----------------
--
--
--
-------- ---------------
--
--
--
-------- -
----------- -------- ------ -------
-------- ---- -----------------------
--
-------- -
--- -------------------------
-- -- ------ ------ --
-------- ---------------
-- ------ ---------- -----------
----------------- -----
-- --- ----- -----------
----------------------- --------
---
--
-- -----
--在配置文件中，我们将 ts-loader 的 options 中的 transpileOnly 属性设置为 true，这样在联机编译时就会忽略类型检查，加快编译速度。
同时，我们为 webpack 配置了 resolve.extensions 和 resolve.plugins 属性，让 webpack 在解析模块时能识别 .tsx、.ts 和 .js 后缀，并能够解析 tsconfig.json 中的路径别名。
最关键的一步是在 plugins 中引入 TypeScriptWebpackPlugin 插件，并指定一些选项，如：
exclude: 排除不需要编译的文件。emitDeclarations: 是否需要生成 .d.ts 文件，常用于开发一个 npm 模块时。declarationOutputPath: 指定 .d.ts 文件的生成路径。
示例代码
tsconfig.json
-- -------------------- ---- -------
-
------------------ -
--------- -------
---------------- -----
--------- ------
--------- ------
---------- -----
------------ -----
---------- ----
-------- -
------ -----------
-
--
---------- ----------------
-webpack.config.js
-- -------------------- ---- -------
----- ---- - ----------------
----- - ------------------- - - -----------------------------------------
----- ----------------------- - -------------------------------------
----- ------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- ------------
--
------- -
------ -
-
----- ----------
---- -
-
------- ------------
-------- -
-------------- -----
----------- ----------------------- -----------------
--
--
--
-------- ---------------
--
--
--
-------- -
----------- -------- ------ -------
-------- ---- -----------------------
--
-------- -
--- -------------------------
-------- ---------------
----------------- -----
----------------------- --------
---
--
-------- -------------
--
-------------- - --------------src/index.ts
import { helloWorld } from '@/helloWorld';
console.log(helloWorld('TypeScript'));
export const sum = (a: number, b: number): number => a + b;
console.log(sum(1, 2));src/helloWorld.ts
export const helloWorld = (name: string): string => `Hello, ${name}!`;types/helloWorld.d.ts
export declare const helloWorld: (name: string) => string;
dist/bundle.js
-- -------------------- ---- -------
--- -- -
---- --------
--- - - ----------------------- -------- -------- -------- -- -
---- --------
------------------ - -----
------------------ - ---- --
------------------ - -------- ------ - ------ ------- - - ---- - ---- --
------------------- -------- -------- -------- -- -
---- --------
------------------ - -----
--- ------------ - ------------------------
---------------------------------------------------
----------- - -------- --- -- - ------ - - -- --
-------------------------- ----
---
--- - - ---
-------- ---- -
--- - - -----
-- ----- - --- -- ------ ----------
--- - - ---- - - -------- -- --
------ ------- ---------- - - --------- - --- ---- - -- ----- - --- ----------
-
-------------------------------------- ----
-----
--- ------------------------------结尾
本文介绍了如何安装、配置和使用 typescript-webpack-plugin，并提供了相关的示例代码。希望这篇文章能帮助你更深入地了解该插件，为你的项目带来更加便捷和高效的 TypeScript 编译体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005558d81e8991b448d2b59