Как я могу использовать posthtml с Webpack и несколькими файлами HTML?

Я пытаюсь использовать Webpack для имитации поведения Parcel в многостраничном приложении (я бы использовал Parcel, но Parcel 1 не будет работать на Node 15, а Parcel 2 все еще находится в стадии бета-тестирования со слишком большим количеством ошибок, чтобы их можно было использовать в настоящее время.), отчасти потому, что мне нужно иметь несколько файлов HTML с общей разметкой. В посылке я использовал posthtml-include, поэтому я хотел бы сделать то же самое с Webpack, хотя я открыт для других вариантов. Для этого я нашел этот репозиторий 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 в этом проекте я ожидаю, что он выведет 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
Источник

2 ответа

Потому что у вас есть require('posthtml-include')(options), и это options нигде не определены в вашей конфигурации веб-пакета.

Источник

Я не очень понимаю конечную цель и может этот вариант вам подойдет?

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

Источник
Другие вопросы по тегам