在做js加载html时的复盘经验

我们要做一个这样的功能：
在一个组件中需要加载一个 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