我正在尝试使用Webpack来模拟Parcel在多页应用程序中的行为(我会使用Parcel，但Parcel 1不能在Node 15上工作，Parcel 2仍然是一个测试版，有太多错误，目前无法使用。(，其中一部分是我需要能够拥有多个带有共享标记的HTML文件。在package中，我使用了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时，我希望它在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文件与Webpacks一起使用的信息。当我使用这个例子中给出的代码进行集成时，它似乎是官方的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
因为您有require('posthtml-include')(options)，而options在您的webpack配置中没有定义。
我真的不明白最终目标，也许这个选项适合你？
{
"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