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

Question

是否可以将 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>

这可能吗？

Answer 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>

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

Inject javascript entry point into html files with webpack dev server?

javascript

webpack

webpack-dev-server