无法使用 Express+Pug (Jade) Web 应用程序使 Webpack “实时重新加载”功能答案

【问题标题】：Can't make Webpack "live reload" features with an Express+Pug (Jade) web app无法使用 Express+Pug (Jade) Web 应用程序使 Webpack “实时重新加载”功能
【发布时间】：2019-07-20 16:23:35
【问题描述】：

我使用 Pug (Jade) 搜索过这里和那里的问题很少，答案也更少。我认为在 GitHub 中查找代码会给我一个答案，但只会带来更多的混乱、过时的代码和不起作用的 repos。

我想要的很简单：开发一个简单的 Node+Express+Postgress+Pug 站点，具有 webpack 的实时重载功能。 Postgress 还没有进入，因为使用 Webpack 作为开发助手还没有奏效。

使用HMR 和 html-webpack-plugin，我期待快速的开发体验。我的 *.pug 文件应该显示控制器发送的数据，就像我运行节点服务器而不是 Webpack 的 webpack-dev-server 时那样。此外，它无法刷新浏览器的更改。其他我对捆绑没有问题的东西都很好；它可以快速重新加载服务器更改等。

因为我没有做 SPA，而且我看到你必须为每个 *.pug 页面生成一个新的插件对象，所以我制作了一个简单的 js 实用程序来收集所有 *.pug 页面，所以我可以这样做：

    new HtmlWebPackPlugin({
      filename: 'index.html',
      template: './src/views/pages/index.pug',
      inject: true,
    }), ...pugPages.pages(env),

我已经测试过了，它可以工作，所以我不需要编写和更新大量愚蠢的代码。

通过该 hack，我可以看到浏览器中呈现的 PUG 页面。但它们没有显示 Express 控制器发送的数据。例如：

index.js:

router.get('/', (req, res, next) => {
  res.render('index', { msg: 'index page' });
  next();
});

index.pug::

extends ../layout

block head
  include ../partials/head

block content
  h1 You are in #{msg}
  //h1= htmlWebpackPlugin.options.title
  //p Welcome to #{htmlWebpackPlugin.options.title}
  //script.
  //  console.log(!{JSON.stringify(htmlWebpackPlugin.options)})

这只是显示“你在”。同样，如果由 Node 运行，它会显示正确的“您在索引页面中”。如您所知，我正在尝试使用htmlWebpackPlugin.options.title。但如果这是唯一可行的方法（通过该对象），我怎样才能从 Express 中获取数据？ html-webpack-plugin 是否使模板成为静态，从而使 pug 变得无用？

我正在使用：

Node.js v10.16.0
darwin 16.7.0
npm 6.9.0
webpack 4.29.0
html-webpack-plugin 3.2.0

我做了一个更精简的分支，一切都准备就绪，以便于帮助。这里是： https://github.com/nmaxcom/Express-pug-webpack

【问题讨论】：

标签： node.js express webpack pug-loader

【解决方案1】：

我有同样的问题，但希望我已经弄清楚了。 Webpack 将在您的服务器启动并运行之前捆绑您的代码 - 这与 Express 不同，后者将接收来自用户的请求、处理它并发送响应。因此，当您使用 html-webpack-plugin 并打包您的 pug 文件时，一切都必须在编译时发生，而不是在请求处理时发生。

但是，这并不意味着使用 pug 是没有用的。您可以使用组合（使用包含和扩展）来大大加快您的 Web 开发速度，并且通过使用 pug 文件和选项的组合，您可以仅使用一个 pug 模板创建多个 html 文件。要根据用户请求动态加载内容，您可以通过 NodeJS 提供这些动态页面，也可以在客户端调用 ajax 来填充数据

关于热重载，请注意，要使 HMR 工作，您需要确保以下几点：-

添加 'webpack-hot-middleware/client?reload=true' 作为 webpack 配置中所有条目的第一项
确保您的 pug 文件（您正在尝试热重载）在您的条目中
确保在 webpack 配置中使用 new Webpack.HotModuleReplacementPlugin() 作为插件（其中 Webpack 只是 require('webpack')

所以，可能的设置是

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

    module.exports = {
      entry: {
        index: [
          'webpack-hot-middleware/client?reload=true',
          path.resolve(__dirname, '../src/client/assets/js/main.js'),
          path.resolve(__dirname, '../src/client/templates/views/index.pug'),
        ],
      },
      .
      .
      .
      plugins: [
        // OccurrenceOrderPlugin is needed for webpack 1.x only
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        // Use NoErrorsPlugin for webpack 1.x
        new webpack.NoEmitOnErrorsPlugin(),
        new HtmlWebpackPlugin({
          template: path.resolve(__dirname, '../src/client/templates/views/index.pug'),
          filename: 'index.html'
          chunks: ['index']
        }),
      ]
      .
      .
      .

注意：如果在上面的示例中 main.js 需要 index.pug，那么您可以从条目中删除 index.pug

【讨论】：