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 dev服务器将javascript入口点注入html文件？

1 个答案: