1

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

包.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在这个项目上运行时，我希望它在显示我的标题index.html的子文件夹中输出一个文件dist（实际上是在它工作之后才使用 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
4

2 回答 2

1

因为你有require('posthtml-include')(options), 并且options没有在你的 webpack 配置的任何地方定义。

于 2020-11-25T12:55:55.957 回答
0

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

{
  "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

于 2021-01-20T10:22:41.057 回答