html-loader和html-webpack-plugin处理html时冲突Failed to decode param

Question

最近想把公司的fis3开发环境迁移到webpack上。利用webpack的html-webpack-plugin插件来打包传统的多页面项目。本来的想法是html-loader处理html里的img:src的资源问题。。html-webpack-plugin插件则处理js和css的资源问题。结果提示错误：URIError: Failed to decode param '/%3C%=%20%20htmlWebpackPlugin.files.css[0]%20%%3E'

以下是代码部分：
common.config.js:

const fs = require('fs')
const path = require('path')
const htmlPath = './src/'//遍历的html文件路径
const jsPath = htmlPath + 'js/'//遍历的js文件路径

function readEntryFile() {

return _readDiffPath(htmlPath, /.html$/)

}

function _readDiffPath(path, reg) {

var ret = []
if (fs.existsSync(path)) {
    fs.readdirSync(path).forEach(function (filename) {
        if (reg.test(filename)) {
            var name = filename.slice(0, filename.lastIndexOf('.'))
            ret.push({
                path: path,
                name: name,
                jsentry: jsPath + name + '.js',
                htmlentry: path + filename
            })
        }
    })
    return ret
}
else {
    console.error("path:" + path + "not found")
    return false
}

}
readEntryFile()
module.exports = readEntryFile

dev.config.js:

const webpack = require('webpack')
const path = require('path')
const readEntryFile = require('./webpack.common.js')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const CleanWebpackPlugin = require('clean-webpack-plugin')

/**

• 默认入口是有vendor的 如果不需要可以去除

*/
var entry = {

vendor: './src/lib/jquery.js'

}
var plugins = [

new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(['dist']),
new webpack.optimize.CommonsChunkPlugin('vendor'),
new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
})

]

readEntryFile().forEach(function (file) {

plugins.push(new HtmlWebpackPlugin({
    filename: file.name + '.html',
    template: file.htmlentry,
    inject: 'head',//问题就出在这里 如果设置自动插入资源则不会报错
    //inject: 'false', 如果设置手动插入资源 然后在html里用模板语法插入则会提示错误
    chunksSortMode: 'manual',
    chunks: ['vendor', file.name]
}))

entry[file.name] = file.jsentry

}, this);

module.exports = {

entry: entry,
output: {
    publicPath: "/",
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
},
module: {
    rules: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        },
        {
            test: /\.css$/,
            use: [{
                loader: "style-loader",
            }, {
                loader: "css-loader",
                options: {
                    sourceMap: true
                }
            }]
        },
        {
            test: /\.scss$/,
            use: [{
                loader: "style-loader",
            }, {
                loader: "css-loader",
                options: {
                    sourceMap: true
                }
            }, {
                loader: "postcss-loader",
                options: {
                    ctx: {
                        autoprefixer: true
                    }, sourceMap: true
                }
            }, {
                loader: "sass-loader",
                options: {
                    sourceMap: true
                }
            }]
        },
        {
            test: require.resolve('./src/lib/jquery.js'),
            use: [{
                loader: 'expose-loader',
                options: 'jQuery'
            }, {
                loader: 'expose-loader',
                options: '$'
            }]
        },
        {
            test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
            loader: 'url-loader',
            options: {
                name: '[name]_[hash:6].[ext]',
            }
        },
        {
            test: /\.html$/,
            use: [{
                loader: 'html-loader',
                options: {
                    attrs: ['img:src', 'img:data-src'],
                    minimize: false
                }
            }]
        },
        {
            test: /\.tmpl$/,
            loader: 'raw-loader'
        }
    ]
},
resolve: {
    alias: {
        'jquery': path.resolve(__dirname, './src/lib/jquery'),
        'jQuery': path.resolve(__dirname, './src/lib/jquery'),
        '$': path.resolve(__dirname, './src/lib/jquery'),
        'sealoader': path.resolve(__dirname, './src/lib/sealoader')
    }
},
devtool: 'inline-source-map',
devServer: {
    contentBase: './dist',
    hot: true,
    disableHostCheck: true
},
plugins: plugins

}

html代码：
<!doctype html>
<html>

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<base target="_blank" />
<title>首页</title>
//同上 手动插入资源会提示错误
<!--<link href="<%= htmlWebpackPlugin.files.css[0] %>" rel="stylesheet" />
<script src="<%= htmlWebpackPlugin.files.js[0] %>"></script>-->

</head>

错误信息：

Answer 1

html-webpack-plugin的入口文件改成ejs模板，就不会冲突了，
或者loader中的html后缀增加exclude即可。