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 一起生成。

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

关于如何制作webpack-dev-server和热模块更换的任何想法都可以在View文件上使用？还是您还有其他更好的解决方案来创建简单的静态网站生成器？

Answer 1

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

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

Answer 2

在@petr回答之后，我确认直接在 html-template.ejs 内部需要 page1.js 可以正常工作：

webpack.config.js 文件中的所有require调用均由节点执行- page1.js 将不连接到devServer
HtmlWebpackPlugin模板中的所有require调用均由 webpack 执行- page1.js 将正确连接到devServer

请参见this github问题参考。

要走得更远，您可以创建一个循环以自动加载所有视图并生成html文件：

webpack.config.js

浏览每个视图文件名，并为该视图加载特定的 HtmlWebpackPlugin 配置

const viewsFiles = require('./readViewsFiles');
const viewsConfig = require('./webpack.views');

const pages = viewsFiles.map(pageName => {
  return viewsConfig({
    title: pageName,
    path: pageName == 'page1' ? '' : pageName,
    pageName
  });
});

module.exports = pages;

readViewsFiles.js

返回所有 views 文件名的数组列表，不带扩展名，例如：['page1','page2','page3']
请参见How do you get a list of the names of all files present in a directory in Node.js?

webpack.views.js

返回 HtmlWebpackPlugin
如果为path == ''，则为filename: 'index.html'，否则为filename: 'page2/index.html'（对于每个视图名称，依此类推）

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = ({
  path = '',
  template = './html-template.ejs',
  title,
  pageName
} = {}) => ({
  plugins: [
    new HtmlWebpackPlugin({
      filename: `${path && path + '/'}index.html`,
      template,
      title,
      pageName
    })
  ]
});

html-template.ejs

动态加载正确的 views 文件

<%= require(`./src/views/${htmlWebpackPlugin.options.pageName}.js`) %>

page1.js 和其他类似的视图文件

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

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

当您运行webpack时，HTML文件的 dist 文件夹中的结构将如下所示：

dist
│    index.html
│
│--- page2
│         index.html
│
│--- page3
          index.html

dist 文件夹被认为是服务器的根目录。

现在，您可以在应用中实现路由器以在页面之间导航：

设置第1页到/的链接：http://www.mywebsite.com/
设置第2页到/page2的链接：http://www.mywebsite.com/page2

注意：您不必在链接中添加 index.html 即可在页面之间导航。使用这种方法，您不会在网址末尾看到 .html 扩展名。

注意：您无法通过file:///协议查看您的应用，因为您的路由器链接设置为绝对路径，因此您必须使用本地或远程服务器。

使用Webpack构建静态网站生成器

2 个答案: