使用 webpack 开发服务器将 javascript 入口点注入 html 文件？答案

【问题标题】：Inject javascript entry point into html files with webpack dev server?使用 webpack 开发服务器将 javascript 入口点注入 html 文件？
【发布时间】：2016-07-17 10:52:03
【问题描述】：

是否可以将 JS 入口点注入到 webpack 开发服务器中，就像 CSS 被内联注入一样？

比如我的index.html是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>app</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

但我想看到的是，在运行我的 webpack 开发服务器之后，是这样的（注意 CSS 是自动注入的，虽然我没有看到 js 参考）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>app</title>
    <style>*,*:after,*:before{margin:0;padding:0}html{ /* .. all other styles */ }</style>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="/js/app.js?1d8f26165af69413a6bb"></script>
</body>
</html>

这可能吗？

【问题讨论】：

标签： javascript webpack webpack-dev-server

【解决方案1】：

是的，有可能。你需要使用HTML Webpack Plugin

该插件将为您生成一个 HTML5 文件，该文件使用脚本标签在正文中包含您的所有 webpack 包。只需将插件添加到您的 webpack 配置中，如下所示：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
};

这将生成一个包含以下内容的文件 dist/index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>

【讨论】：

太好了，这正是我所需要的。我最终使用了一个模板，因为我需要里面的<div id="app"></div>。谢谢！
由于某种原因不适用于开发服务器