前言
对于前端开发者来说，Webpack 是非常常用且基础的工具。Webpack 通过使用 Loader 和 Plugin，能够将源代码中的静态资源如 CSS，图片等转换为 JavaScript 代码，最终构建成可以在浏览器中运行的 Bundle 文件。
在使用 Webpack 时，我们经常遇到使用第三方库，但实际上这些库并不是在主应用的目录下，而是在一些依赖库里面。这时，我们可以通过 babel-plugin-import-resolver 包来解决该问题。
使用方法
1.首先，你需要在你的项目中安装 babel-plugin-import-resolver 包。
npm install babel-plugin-import-resolver --save-dev
2.修改 webpack.config.js的babel-loader配置。
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
-- -- --- ---
----- --------
------- ---------------
-------- ---------------
-------- -
-- ---
-------- -
-
--------- -
------------ ------- -- --
----------------- ------ -- ---- ------
------ ---- -- ---- ---
-
-
-
-- ---
-
-
-
-
-- ---
-3.在 .babelrc 中添加 plugins 配置项来使用 babel-plugin-import-resolver 包。
-- -------------------- ---- -------
-
---------- -
-
------------------
-
---------- -------- -- ---
-------- - -- ----
------------- ------------------
-
-
-
-
-以上代码会将根路径设置为 ./src，并把 ./src/components 目录设置别名为 Components。
这里需要注意的是，该包只对以 import 开头的方式引入的包有效。
示例代码
修改 webpack.config.js
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
-- -- --- ---
----- --------
------- ---------------
-------- ---------------
-------- -
-------- --------------------- -----------------------
-------- -
-
--------- -
------------ -------
----------------- ------
------ ----
-
--
-
------------------
-
---------- ----
-------- -
------------- ------------------
-
-
-
-
-
-
-
-
--修改 .babelrc
-- -------------------- ---- -------
-
---------- --------------------- -----------------------
---------- -
-
------------------
-
---------- --------
-------- -
------------- ------------------
-
-
-
-
-测试代码
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------ - ---- -------
------ -------- ---- ----------------------
----- --- ------- --------- -
-------- -
------ -
-----
--------- --
------- -------------------------------
------
--
-
-
------ ------- ----总结
通过以上步骤，我们成功使用 babel-plugin-import-resolver 包解决了第三方库路径问题，同时也打通了 webpack 和 babel 的“再生之路”。此外，该方法也能够帮助开发者避免在大型项目中进行手动调试的苦恼。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551b681e8991b448cf16c