webpack能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中。
webpack其中非常重要的一环就是，能够对加载的资源文件，进行一些处理。比如把less、sass文件编译成css文件，负责这个处理过程的，就是webpack的loader。
如：
vue-loader 是一个 Webpack 的 loader，可以将指定格式编写的 Vue 组件转换为 JavaScript 模块。Vue组件默认分成三部分，<template>、<script> 和 <style>，而vue-loader，会帮助我们去处理这个vue组件，把其中的html，js，css分别编译处理，最终打包成一个模块。
loader本质就是接收字符串(或者buffer)，再返回处理完的字符串(或者buffer)的过程。
loader是一个函数，当某种资源需要用这个loader转换时，这个函数会被调用。并且，这个函数可以通过提供给它的this上下文访问Loader API。
只要我们想对文件进行处理时，我们都可以去找想对应的loader。那么问题来了，万一找不到想要的loader该怎么办？
如希望我加载的html文件，都嵌套在一个 layout.html 文件中。这样如果是编写多页应用，我就只需要编写唯一不一样的中心内容，而把网站公共的部分作为layout抽离开来。如下所示：
<!-- layout.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pure Web</title>
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
</head>
<body>
<header>This is Header</header>
<!-- 我希望我webpack加载的html，都会被嵌套在这个{{__content__}}部分 -->
{{__content__}}
<footer>This is footer</header>
</body>
</html>
通过loader-utils来获取loader的配置项。通过node的fs.readFileSync去加载文件，loader文件可以这样写：
module.exports = function (source) { const options = loaderUtils.getOptions(this) const layoutHtml = fs.readFileSync(options.layout, 'utf-8') return layoutHtml.replace('{{__content__}}', source) }
webpack的config增加如下loader配置：
{ test: /.(html)$/, loader: path.resolve(__dirname, './loaders/replaceLoader.js'), // 使用本地的loader模块 include: htmlPath, // 想要注入layout文件中的html文件 options: { layout: layoutHtmlPath // layout.html的路径 } }
原文：https://segmentfault.com/a/1190000011524373
https://www.jianshu.com/p/cb888d69ca34