【webpack】使用npm install html-loader安装，webpack打包后报错

今天想使用webpack打包实现页面公共部分复用的功能，然后就开始修改代码。

1、首先在view下新建一个公共文件layout，并新建文件html-head.html。

2、把这两个文件的公共头部提取出来，放在html-head.html文件中

3、在index.html文件中对应的部分引入

<%= require('./layout/html-head.html') %>

但只是这样写是不能加载出引入的部分文件的。这会导致webpack-html-plugin和html-loader冲突。因为这里需要使用html-loader解析。

'html-loader！'  // 表示仅仅在这串代码使用html-loader解析

4、这里需要下载html-loader文件。

 npm install html-loader --save-dev   

这里提示html-loader的版本问题。如果我们不作处理，直接进行webpack打包，如下：

会报错异常的错误。因此，这里需要对html-loader做版本的处理。

采用 如何寻找以前的版本 的方法，可以找到html-loader之前的版本。这里我们使用@0.5.4版本重新进行安装。

5、重新安装html-loader

npm install [e-mail] --save-dev

可以发现，关于html-loader的警告已经消失了。

6、再次使用webpack重新打包

可以发现已经可以正确打包了。我们再来看看打包后的文件

可以发现打包成功了。

---

如果想要更多学习html-loader，可点击查看。