webpack4利用html-loader实现HTML代码复用同时解决图片失效问题。

webpack处理多页面应用的时候，可以利用html-loader处理每个页面相同的HTML代码，例如header/footer。这样可以避免使用模板引擎，后端渲染增加难度。
现在我有一个header，想复用这个header。

<header>
    <div class="intro">
        <div class="logo"></div>
        <div class="kouhao">线上健康</div>
    </div>
    <nav class="nav">
        <ul class="nav__list">
            <li class="nav__item">
                <a href="./index.html">首页</a>
            </li>
            <li class="nav__item">
                <a href="./life.html">生活搭配</a>
            </li>
            <li class="nav__item">
                <a href="./rumour.html">谣言止步</a>
            </li>
            <li class="nav__item">
                <a href="./diet.html">个人健康</a>
                </li>
            <li class="nav__item">
                <a href="./help.html">帮助</a>
            </li>
            <li class="nav__item">
                <a href="./login.html">注册 / 登录</a>
                </li>
        </ul>
    </nav>
</header>

1.cnpm i html-loader -D
这里不用在webpack.config.js中配置loader去处理html文件，因为html文件一般都会被html-webpack-plugin插件处理

2.引入header.html
<%= require('html-loader!./../../src/html/header.html') %>
标识这段代码要被html-loader处理

注释了html-loader在webpack.config.js中的配置，会使图片失效。
比较简单的解决方法

<img src="<%= require( '../images/test.jpg') %>" />