介绍
webpack-xml-loader 是一个用于加载 XML 文件的 webpack loader。它可以将 XML 文件转换成 JavaScript 模块，以便在代码中方便地访问和使用其中的内容。该 loader 支持所有符合 XML 标准的文件。
安装
要使用 webpack-xml-loader，首先需要在项目中安装该包：
npm install webpack-xml-loader --save-dev
配置
在 webpack 配置文件中添加如下配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- --------------------
-
-
-
-以上代码会将所有 .xml 文件都使用 webpack-xml-loader 进行处理。
使用
在 JavaScript 代码中，可以将 XML 文件作为一个模块引入，然后像访问对象一样访问其中的内容。例如，假设有如下的 XML 文件 data.xml：
-- -------------------- ---- -------
-------
------
---------------
-------------
-------
------
---------------
-------------
-------
--------可以在 JavaScript 代码中这样引入文件：
import data from './data.xml'; console.log(data.users.user[0].name); // 输出 "张三"
示例代码
以下是一个完整的使用示例。假设项目结构如下：
. ├── src │ ├── index.js │ └── data.xml └── webpack.config.js
其中，src/index.js 的内容如下：
import data from './data.xml';
console.log('所有用户信息如下：');
data.users.user.forEach(function(user, index) {
console.log(`${index + 1}. ${user.name}，${user.age} 岁`);
});src/data.xml 的内容如下：
-- -------------------- ---- -------
-------
------
---------------
-------------
-------
------
---------------
-------------
-------
--------webpack.config.js 的内容如下：
-- -------------------- ---- -------
-------------- - -
------ -----------------
------- -
--------- -----------
--
------- -
------ -
-
----- ---------
---- --------------------
-
-
-
--运行 webpack 工具构建项目，即可得到输出结果：
-- -------------------- ---- -------
- ------- ------ -----------
----- --------------------
-------- ------- ------
----- ----
----- --- ---------- --------
----- ---- ------ ----- -----
--------- ---- --- ---- --------- ----
---------- ---- - ---------
---------------- --- ----- ------ -------
---------------- --- ----- ------ -------在浏览器中打开 index.html 文件，即可看到输出结果：
所有用户信息如下： 1. 张三，25 岁 2. 李四，30 岁
结论
webpack-xml-loader 是一个很实用的 webpack loader，它可以方便地将 XML 文件转换成 JavaScript 模块。使用该 loader，我们可以更加方便地访问和使用 XML 文件中的内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668181e8991b448e2a2d