在前端开发中，webpack 已经成为了不可或缺的构建工具。而 TypeScript 也日渐成为前端开发的主流语言。在前端使用 TypeScript 需要做一些额外的配置，以便 TypeScript 能够被 webpack 正确引入和处理。而 webpack-modular-typescript-import 就是一款能够帮助我们实现这些额外配置的 npm 包。
webpack-modular-typescript-import 是什么？
webpack-modular-typescript-import 是一款用于 TypeScript 项目中，帮助你自动导入模块的 webpack 插件。它会自动导入所需的模块，避免了需要手动导入模块的烦恼。同时，它还能自动支持非相对路径的导入，并实现自动 alias 与路径解析。
安装和配置
首先，需要在项目中安装 webpack-modular-typescript-import：
npm install webpack-modular-typescript-import --save-dev
然后，在 webpack 配置文件中引入插件并添加配置：
-- -------------------- ---- -------
----- ------------------------------ - ---------------------------------------------
-------------- - -
-- ---
-------- -
----------- ------- ------- ------ -------
--
------- -
------ --
----- ----------
---- ------------
-------- ---------------
--
--
-------- -
-- ----
--- --------------------------------
--------- ----------
------------ -------------
----------------- -----------------
---------- ------
---
--
--其中的各个参数含义如下：
basePath: 项目的根目录绝对路径libraryName: 导入指定库的名称libraryDirectory: 导入指定库的目录extension: 导入指定库的文件扩展名
使用示例
在具体的开发中，使用 webpack-modular-typescript-import 很容易。在我们的代码中直接使用要导入的模块即可，例如：
import { Button } from 'components/button';这里 Button 就是我们要导入的模块，而 components/button 是配置中的 libraryDirectory。webpack-modular-typescript-import 将自动查找符合 libraryName 和 extension 的文件，并将其导入到当前模块中。
结语
通过使用 webpack-modular-typescript-import，我们可以避免每次在前端开发中手动导入模块的烦恼，使代码更加简洁易读。同时，它能够省去一些额外的 webpack 配置，让我们的前端开发更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005595d81e8991b448d6c2e