如果山不向我走来，那我便向山走去，因为我知道山就在那。
不想当将军的士兵不是好士兵！！！
在我们利用webpack打包代码过程中，经常会按需使用各种各样的文件loader，以及各种加载器，那你有没有想过自己搭建一个文件loader帮助我们实现一些操作呢？
其实步骤很简单：
先看看文件目录树
我们可以配置一个template结尾的文件，代替原先的html
操作步骤：
第一步：
在项目根目录树下新建一个lodars文件夹，在其下新建文件template.loader.js文件,
因为是我们的项目是基于node.js,Node程序由许多个模块组成，每个模块就是一个文件。Node模块采用了CommonJS规范。
根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在一个文件定义的变量（还包括函数和类），都是私有的，对其他文件是不可见的。
第二步：编写一个 loader
loader 是导出为一个函数的 node 模块。该函数在 loader 转换资源的时候调用。给定的函数将调用 loader API，并通过 this 上下文访问。
在配置文件里配置一个loader路径
{
test: /\.template$/,
use: [
{
loader: path.resolve(__dirname, '../loaders/template.loader.js'),
},
],
},
注意文件路径
到这里，我们的基础配置就已经完成，当webpack遇到以.template结尾的文件都会自动去loaders下的template.loader.js里导出的函数做出处理
那么我们现在就需要去完善其处理js文件里的内容
官方文档中说:
当一个 loader 在资源中使用，这个 loader 只能传入一个参数 - 这个参数是一个包含包含资源文件内容的字符串同步 loader 可以简单的返回一个代表模块转化后的值。在更复杂的情况下，loader 也可以通过使用 this.callback(err, values...) 函数，返回任意数量的值。错误要么传递给这个 this.callback 函数，要么扔进同步 loader 中。loader 会返回一个或者两个值。第一个值的类型是 JavaScript 代码的字符串或者 buffer。第二个参数值是 SourceMap，它是个 JavaScript 对象。
也就是说当一个loader处理一个文件时，会将该文件里的所有文本文件作为字符串传递给该导出函数
到此，我们还需要为了符合impots导出规范，需要在该loader函数中导出该字符串时拼接export default
完整代码如下：
module.exports = (data) => {
//打印传入的文件字符串
console.log(data);
'export default' + '`' + data.replace(/\n/g, '') + '`';
};
现在我们就可以在文件夹单元中新建....template文件，并且该文件也会被正确打包解析
更多详情，移步👉官方文档
