简介
contents-loader 是一个用于将指定目录下的所有文件内容合并成一个字符串的 webpack loader。它可以很方便地把多个文件的内容合并在一起，常用于生成模板或者配置文件等。
安装
安装 contents-loader：
npm install contents-loader --save-dev
使用
使用 contents-loader 很简单，只需要在配置文件中指定使用它即可。
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
-
------- ------------------
-------- -
----------- ----------
---------------------- ----
-
-
-
-
-
-
-在这个例子中，配置了一个 test 为 \.txt$ 的 loader，使用了 contents-loader 并传入了一些参数。其中：
outputPath表示合并后的文件输出路径，这里是在./dist/下创建文件。includeSubdirectories表示是否遍历子目录，这里指定了遍历。
示例
在项目中新建一个 template 目录，包含 header.html 和 footer.html 两个文件。在 index.js 中通过 require 引入这两个文件并合并输出。
// index.js
const header = require('./template/header.html')
const footer = require('./template/footer.html')
console.log(header + footer) // 合并后的内容在配置文件中配置 loader：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------
---- -
-
------- ------------------
-------- -
----------- ----------
---------------------- ----
-
-
-
-
-
-
-运行打包命令，合并后的文件将输出到 ./dist/ 目录下。
总结
contents-loader 可以大大提升项目的开发效率，在处理模板或者配置文件时尤为方便。通过本文的介绍，希望读者可以更好地了解和使用 contents-loader 这一有用的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005551481e8991b448d2493