Webpack 是否在应用程序HTML中包含指向网页入口点的直接链接？

“我的网页”入口点的名称中包含一个

[hash]

：

entry: "index.js",
output: {
    path: "build/",
    filename: "index-[hash].js",
}

如何从应用程序的HTML直接链接到该入口点

例如，我希望发送到客户端的HTML包括：

<script src="build/index-41d40fe7b20ba1dce81f.js"></script>

---

我该怎么做？是否有一个插件可以生成入口点清单，我的应用程序可以读取并发出相应的文件名？

我刚刚开始使用webpack，并发现它非常适合将新散列的js文件写入index.html。如果你不想大口喝的话，可能会有点帮助。下面是一个gulpfile片段，可能也会有所帮助：

var util=require（'util'）；
var path=require（'path'）；
var gulp=需要（“gulp”）；
var runSequence=require（'run-sequence'）；
var rimraf=需要（“rimraf”）；
var gzip=require（'gulp-gzip'）；
var notify=需要（'gulp-notify'）；
var gutil=require（'gulp-util'）；
var webpack=require（'webpack'）；
var webpackConfig=require（'./client/webpack.config'）；
var through2=需要（'through2'）；
吞咽任务（“网页包”，功能（cb）{
webpack（webpackConfig，函数（err，stats）{
如果（错误）抛出新的gutil.PluginError（“webpack”，错误）；
var jsFilename=stats.toJson（）.assetsByChunkName['app']；
log（“>>>”，jsFilename）；
//如果打开源映射，您将得到['somefile.js'，'somefile.js.map']
if（util.isArray（jsFilename））{
jsFilename=jsFilename.filter（函数（文件名）{
返回path.extname（filename）.toLowerCase（）=='.js'
}).shift（）；
}
//将散列的main.js写入/dist/index.html
gulp.src（“./client/index.html”）
.on（'error'，handleErrors）
.pipe（通过h2.obj）（函数（乙烯基文件、enc、tCb）{
vinylFile.contents=新缓冲区（字符串（vinylFile.contents）
.replace（'main.js'，jsFilename））；
这个.push（乙烯基文件）；
tCb（）；
}))
.管道（大口目的地（'./距离/'）；
cb（）；
});
});
函数句柄错误（）{
var args=Array.prototype.slice.call（参数）；
notify.onError（{title:'Error'，message:'}）；
这个.emit（'end'）；
}
gulp.task（'gzip-deploy'，function（）{
返回一口src（'./dist/***'）
.on（'error'，handleErrors）
.pipe（gzip（））
.管道（大口目的地（'./距离/'）；
});
吞咽任务（“清洁”，功能（cb）{
返回边缘（'./距离'，cb）；
});
吞咽任务（“默认”，功能（cb）{
运行顺序（'clean'，'webpack'，cb）；
});
吞咽任务（'deploy'，函数（cb）{
webpackConfig.plugins=webpackConfig.plugins=[
新建webpack.optimize.UglifyJsPlugin（），
新的webpack.DefinePlugin({
“process.env”：{
NODE_ENV:JSON.stringify（“生产”）
}
})
];
webpackConfig.watch=false；
webpackConfig.devtool=null；
webpackConfig.output.filename=“main-[hash].js”；
运行序列（'clean'，'webpack'，'gzip deploy'，cb）；
});

下面是我的

webpack.config.js

文件，也可以了解一下上下文：

var path=require（'path'）；
module.exports={
上下文：_dirname，
devtool:'源映射'，
条目：{
应用程序：'./main.js'
},
手表：没错，
输出：{
path:path.join（uu dirname，“/../dist”），
文件名：“main.js”
},
模块：{
装载机：[
{test:/\.js$/，loader:'jsx loader？harmony'}，
{test:/\.css$/，加载程序：“样式加载程序！css加载程序”}，
{test:/\.less$/，加载程序：“样式加载程序！css加载程序！less加载程序”}，
{test:/\.png$/，loader:“url loader？prefix=img/&limit=8192”}，
{test:/\.jpg$/，loader:“url loader？prefix=img/&limit=8192”}，
{test:/\.gif$/，loader:“url loader？prefix=img/&limit=8192”}，
{test:/\.woff$/，加载程序：“url加载程序？前缀=font/&limit=8192”}，
{test:/\.eot$/，加载程序：“文件加载程序？前缀=font/”}，
{test:/\.ttf$/，加载程序：“文件加载程序？前缀=font/”}，
{test:/\.svg$/，loader:“文件加载器？前缀=font/”}
]
},
决心：{
扩展名：[''，'.js'，'.json']，
模块目录：['node_modules']
},
插件：[]
};

（我是作者）将为您生成一个index.html，用于引用正确的散列包文件名

var HtmlWebpackPlugin=require（“html网页包插件”）；
var webpackConfig={
条目：“index.js”，
输出：{
路径：“build/”，
文件名：“索引-[hash].js”，
},
插件：[新的HtmlWebpackPlugin（）]
}

---

这将生成

build/index.html

，其中包含带有

标记的捆绑包。

还有一个

stats.toJson（）.assetsByChunkName

，它是一个将

chunkName

映射到文件名的对象。谢谢！这大大简化了上述的吞咽任务（

stats.toJson（）.assets.reduce

feeld dirty）。根据你的建议编辑代码。嘿，真的，很棒的插件。有没有一个选项可以在不创建新的“.html”文件和不使用“blueimp模板”的情况下使用它？我有一个要更新的现有html文件我不确定这是否是您上次发表评论时在4月份的一个选项，但看起来6个月后，有选项

template

（通过文件名获取现有模板）和

templateContent

（直接添加html字符串）。我同意，顺便问一下，很棒的插件。有没有办法只生成一个脚本标签，这样你就可以将它包含到现有的模板中