Maison > Questions et réponses > le corps du texte
// 问题已解决 没发现代码有问题 重新clone了项目, 改了个template的路径 就好了 不知道发生了什么, 囧
配置
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: /\.vue$/,
loader: 'vue'
},
{
test: /\.coffee$/,
exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
loader: 'coffee'
}
]
},
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>
PHPz2017-04-11 09:56:21
你的模版文件明明是html,估计需要ejs文件才可以识别的
我的配置,webpack.config.js:
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
path: './dist',
publicPath: 'dist/',
filename: 'build.js'
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.(png|jpg|gif)$/,
loader: 'file?name=[name].[ext]?[hash]'
}
]
},
babel: {
presets: ['es2015', 'stage-0'],
plugins: ['transform-runtime']
},
plugins:[
new HtmlWebpackPlugin({
title: 'Custom template',
template:"index.ejs",
inject:true
})
]
}
if (process.env.NODE_ENV === 'production') {
module.exports.plugins = [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.optimize.OccurenceOrderPlugin()
]
} else {
module.exports.devtool = '#source-map'
}
index.ejs
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>
目录结构
PHPz2017-04-11 09:56:21
应该是你的webpack.config.js的配置文件里面加了 html-loader,加了之后会正常解析html文件作为模版,就会直接把 <%= htmlWebpackPlugin.options.title %>
解析成字符串。如果有html-loader ,去掉就可以了
黄舟2017-04-11 09:56:21
出现一样的问题,去掉html-loader,就可以了,另外html文件的<%= htmlWebpackPlugin.options.title %>
htmlWebpackPlugin 注意大小写,不要写错成 HtmlWebpackPlugin。
PHP中文网2017-04-11 09:56:21
here has a cool plugin can resolve this issue in simple way:
web-webpack-plugin
have a try.
高洛峰2017-04-11 09:56:21
在进行插件配置的时候,需要将你选择作为template
的文件改为ejs
。html-webpack-plugin
会将ejs
的模板文件解析为html
并输出。
plugins: [
new HtmlWebpackPlugin({
title: 'xxx',
template: './index.ejs'
})
]