原文地址:https://segmentfault.com/q/1010000004555431
webpack.config.js配置:
var webpack = require("webpack"); var vue = require("vue-loader"); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var HtmlWebpackPlugin = require('html-webpack-plugin'); var publicPath = "/public/assets/"; var plugins = [ new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'), new HtmlWebpackPlugin({ title: '111', template: './resources/assets/template/index.html', // Load a custom template inject: true // Inject all scripts into the body }), new HtmlWebpackPlugin({ title: '222', filename: '../../resources/views/user.html', template: './resources/assets/template/index.html', inject: true, hash: true, cache: true // chunks: ['vendors'] }) ]; var config = { entry: { user:['./resources/assets/user-main.coffee'], vendors: ['vue','jquery','vuex','vue-router'] }, output: { path: __dirname + publicPath, filename: '[name].js', publicPath: publicPath, }, module: { loaders: [ { test:/.html$/, //include:[path.resolve(__dirname,"src")], loader:"html-loader" } ] }, plugins: plugins }; module.exports = config;
模板index.html
<!DOCTYPE html>
<html>
<head>
<title> <%= htmlWebpackPlugin.options.title %> </title>
</head>
<body>
</body>
</html>
生成index.html
<!DOCTYPE html>
<html>
<head>
<title> <%= htmlWebpackPlugin.options.title %> </title>
</head>
<body>
</body>
</html>
项目目录:
猜测原因:
因为配置文件中用到了html-loader, 是的模板index.html中的配置被当做字符串处理. 而使用html-loader多用来处理 component页面. 所以这里指定html-loader的处理范围(使用include配置或exclude[https://webpack.js.org/configuration/module/#rule-exclude]配置). 例如只处理src下的html. 可配置为include:[path.resolve(__dirname,"src/")](参见上面被注释的部分), 问题可解决.
题外话:
这种解决方式毕竟只能暂时解决这种简单的应用场景, 如果有页面同时需要html-loader和html-webpack-plugin处理,就不行了. 所以, 还得看看文档啊!!!