我们要做一个这样的功能：
在一个组件中需要加载一个 html 文件来进行展示，比如：协议之类的。
最后完美解决了这个问题，描述一下过程：
首先，觉得 js 不能 import 或 require html 文件，尝试过的确不行。
找到一个解决办法就是写一个逻辑，在构建项目的时候，把这些 html 文件放到打包的目录下，然后在业务逻辑里面，使用 iframe 引用当前文件的形式加载，可是这么做，在开发的时候就看不到效果，只能是在构建好时才能访问。
还想到过把 html 文件改造成组件，然后 import 进来，是很笨的办法。
还去网上找了一遍如何在 vue，react 中导入 html 文件，无果。
期间还是有考虑到使用 webpack 配置项的形式来处理这个问题，但是没有头绪。
最后在 webpack 官网找到了 html-loader，发现它能够处理 html 文件，于是尝试使用它，发现可行，但是它把 html 文件都集合进 js 包里面了，得将它抽离出来，于是找到 extract-loader，后来又找到 file-loader，得将它们仨合起来一起使用，才能发挥出力量。
在调 file-loader 的时候，走了很多弯路，最主要是在研究正则，怎样去排除掉index.html，因为我发现它会把 index.html 也处理了。
最后，发现一个配置项：include: [resolve('src')],
它的作用是把搜索的范围限制在 src 目录里面，又因为 index.html 文件不在 src 目录中，于是问题得以解决，也不用费劲去研究正则怎么写了。
总结：
如果一开始就往 webpack 配置项这个方向去考虑，想到 webpack 能处理一切类型的文件，只需要合适的 loader 来配合就可以。那么我就会想到会不会有一个能够处理 html 的 loader 来加载 html 文件，最后再熟悉 include 配置项，就可以缩短解决问题的时间。
代码
// module: {// rules: [{ test: /\.html$/, include: [resolve('src')], use: [
{ loader: 'file-loader', options: { name: "[name].[ext]", outputPath: 'html/'
},
},
{ loader: 'extract-loader'
},
{ loader: 'html-loader', options: { minimize: true, removeComments: false, collapseWhitespace: false,
}
},
],
},// ]// }
作者：kybetter
链接：https://www.jianshu.com/p/f861d275ab10
随时随地看视频
