最近想把公司的fis3開發(fā)環(huán)境遷移到webpack上。利用webpack的html-webpack-plugin插件來打包傳統(tǒng)的多頁面項(xiàng)目。本來的想法是html-loader處理html里的img:src的資源問題。。html-webpack-plugin插件則處理js和css的資源問題。結(jié)果提示錯(cuò)誤：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')

/**

• 默認(rèn)入口是有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',//問題就出在這里 如果設(shè)置自動(dòng)插入資源則不會(huì)報(bào)錯(cuò)
    //inject: 'false', 如果設(shè)置手動(dòng)插入資源 然后在html里用模板語法插入則會(huì)提示錯(cuò)誤
    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>
//同上 手動(dòng)插入資源會(huì)提示錯(cuò)誤
<!--<link href="<%= htmlWebpackPlugin.files.css[0] %>" rel="stylesheet" />
<script src="<%= htmlWebpackPlugin.files.js[0] %>"></script>-->

</head>

錯(cuò)誤信息：