如何将 posthtml 与 Webpack 和多个 HTML 文件一起使用？答案

【问题标题】：How can I use posthtml with Webpack and multiple HTML files?如何将 posthtml 与 Webpack 和多个 HTML 文件一起使用？
【发布时间】：2020-11-25 12:45:54
【问题描述】：

我正在尝试使用 Webpack 来模拟 Parcel 在多页应用程序中的行为（我会使用 Parcel，但 Parcel 1 无法在 Node 15 上运行，并且 Parcel 2 仍然是一个测试版，存在太多无法使用的错误目前。），其中一部分是我需要能够拥有多个具有共享标记的 HTML 文件。在包裹中，我使用了 posthtml-include，所以我想对 Webpack 做同样的事情，尽管我对其他选项持开放态度。为此，我找到了this github存储库，这似乎是整合posthtml和Webpack的官方方式。有了这个，我创建了一个最小的 Webpack 项目来弄清楚如何使用它，我发现它没有按预期工作。我的最小、完整、可验证的示例如下：

package.json:

{
  "name": "posthtml",
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "html-loader": "^1.3.2",
    "posthtml-include": "^1.6.0",
    "posthtml-loader": "^2.0.1",
    "webpack": "^5.6.0",
    "webpack-cli": "^4.2.0"
  }
}

webpack.config.js（基本上是链接的 github 存储库中示例的复制/粘贴）：

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.html$/,
                use: [
                    'html-loader',
                    {
                        loader: 'posthtml-loader',
                        options: {
                            ident: 'posthtml',
                            parser: 'PostHTML Parser',
                            plugins: [
                                /* PostHTML Plugins */
                                require('posthtml-include')(options)
                            ]
                        }
                    }
                ]
            },
        ]
    }
};

src/index.js:

import html from './index.html';

src/index.html:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h1>Test</h1>
    </body>
</html>

当我在这个项目上运行npm run build 时，我希望它会在dist 子文件夹中输出一个index.html 文件来显示我的标题（实际上使用Webpack 和Posthtml 的功能是在它完全工作之后。），然而相反，我收到以下错误：

$ npm run build

> posthtml@ build <path to the project directory is redacted>
> webpack

[webpack-cli] ReferenceError: options is not defined
    at Object.<anonymous> (<path to the project directory is redacted>/webpack.config.js:22:35)
    at Module._compile (<path to the project directory is redacted>/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1131:10)
    at Module.load (node:internal/modules/cjs/loader:967:32)
    at Function.Module._load (node:internal/modules/cjs/loader:807:14)
    at Module.require (node:internal/modules/cjs/loader:991:19)
    at require (<path to the project directory is redacted>/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at requireConfig (/<path to the project directory is redacted>/node_modules/webpack-cli/lib/groups/resolveConfig.js:73:18)
    at Array.map (<anonymous>)
    at resolveConfigFiles (<path to the project directory is redacted>/node_modules/webpack-cli/lib/groups/resolveConfig.js:124:40)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! posthtml@ build: `webpack`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the posthtml@ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     <home directory is redacted>/.npm/_logs/<current time, which gives timezone, is redacted>-debug.log

为什么 Webpack 的行为不像我预期的那样？我怎样才能使它表现得像我期望的那样？我试图找到其他资源来了解如何将 Posthtml 与 Webpack 一起使用，但我发现的大部分内容仅提供了有关如何将常规 HTML 文件与 Webpack 一起使用的信息。当我使用该集成的官方 Github 存储库示例中给出的确切代码时，它不起作用是没有意义的。

版本信息：

$ npm --version            
6.14.8
$ node --version
v15.2.1
$ uname -a      
Linux blue 5.9.10-arch1-1 #1 SMP PREEMPT <date is redacted> x86_64 GNU/Linux

【问题讨论】：

标签： webpack posthtml

【解决方案1】：

因为你有 require('posthtml-include')(options)，并且 options 没有在你的 webpack 配置中定义。

【讨论】：

谢谢！我通过将 (options) 更改为 () 来解决此问题，然后我必须将 posthtml-include 安装到开发依赖项，它构建 something 但它只输出一个 main.js 文件，没有 HTML文件在dist。如何让它输出 HTML 文件？看起来我的配置有不止一个错误（如果所有需要的信息都在一个 SO queston 中，那么了解如何将 PostHTML 与 Webpack 一起使用的读者将很有帮助）..
这是正常的，如果要输出html文件，请检查github.com/jantimon/html-webpack-plugin。
我知道如何将该插件与模板一起使用，但我不知道如何将它与 posthtml 集成。你能澄清一下吗？
抱歉，我无法提供帮助，因为我没有使用 posthtml 或 html-loader 的经验。不久前，我写了一个框架github.com/chenxsan/voidjs 来生成多个带有可共享 React 组件的 HTML 页面，并且相当复杂。恐怕你的用例也不容易。希望其他人可以提供帮助。

【解决方案2】：

我不太了解最终目标，也许这个选项适合你？

{
  "name": "posthtml",
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "extract-loader": "^5.1.0",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "posthtml-include": "^1.6.0",
    "posthtml-loader": "^2.0.1",
    "webpack": "^5.6.0",
    "webpack-cli": "^4.2.0"
  }
}

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.html$/,
                use: [
                    'file-loader',
                    'extract-loader',
                    'html-loader',
                    {
                        loader: 'posthtml-loader',
                        options: {
                            plugins: [
                                require('posthtml-include')()
                            ]
                        }
                    }
                ]
            },
        ]
    }
};

但是如果你只需要生成html你可以使用posthtml-cli

【讨论】：