javascript - 使用 Webpack 构建静态站点生成器

Question

我想使用 javascript 模板文字生成 html 内容，并在 Webpack 编译时输出静态 html 文件。我还需要一个具有热模块替换功能的开发服务器，可以处理 html、css 和 js 文件。

我在 HtmlWebpackPlugin 中需要 page1.js选项:

new HtmlWebpackPlugin({
  template: './html-template.ejs',
  appMount: require('./src/views/page1')
})

然后我使用自定义 ejs 模板 html-template.ejs 导入生成的 html 内容:

<% if (htmlWebpackPlugin.options.appMount) { %>
<%= htmlWebpackPlugin.options.appMount %>
<% } %>

page1.js 看起来像这样:

const h1 = (text) => `<h1>${text}</h1>`;

module.exports = h1('Hello World');

请注意，page1.js 未设置为入口点。唯一的入口点是 src/index.js(里面只有一个 console.log 语句)。

当我运行 webpack 时，一切正常，dist/index.html 与 dist/main.js 一起生成。 p>

如果我运行 webpack-dev-server 并尝试编辑 page1.js，浏览器会重新加载，但 html 内容不会更新。

关于如何使 webpack-dev-server 和热模块替换适用于 View 文件的任何想法？或者您有任何其他更好的解决方案来创建简单的静态站点生成器吗？

Answer 1

您可以在 html 中执行此操作:

<%=require('./views/page1.js')%>