用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 %>
<% } %>

页1.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和热模块替换在视图文件上工作有什么想法吗？或者您有其他更好的解决方案来创建一个简单的静态站点生成器吗？

Answer 1

在@petr回答之后，我确认需要在html-template.ejs中直接使用page1.js可以很好地工作：

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

请参阅这 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

• 返回没有扩展名的所有视图文件名的数组列表，例如：['page1','page2','page3']
• 请参阅如何获得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

• 动态加载正确的视图文件。

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

页面1.js和其他类似的视图文件

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

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

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

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

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

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

• 设置指向/的page1：http://www.mywebsite.com/链接
• 设置指向/page2的page2：http://www.mywebsite.com/page2链接

注意:您不需要将index.html添加到您的链接中才能在页面之间导航。使用此方法，您将不会在url末尾看到.html扩展。

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