错误中的错误：子编译失败： 模块构建失败（来自 ./node_modules/pug-loader/index.js）： 类型错误：选项必须是一个对象 在 Function.validateOptions (C:\Users\user\Desktop\WEB\webpack-template ode_modules\pug-loader\index.js:67:11)
在 Object.load (C:\Users\user\Desktop\WEB\webpack-template ode_modules\pug-loader\index.js:9:8) ModuleBuildError：模块构建失败（来自 ./node_modules/pug-loader/index.js）： 类型错误：选项必须是一个对象 在 Function.validateOptions (C:\Users\user\Desktop\WEB\webpack-template ode_modules\pug-loader\index.js:67:11)
在 Object.load (C:\Users\user\Desktop\WEB\webpack-template ode_modules\pug-loader\index.js:9:8) 在 processResult (C:\Users\user\Desktop\WEB\webpack-template ode_modules\webpack\lib\NormalModule.js:758:19) 在 C:\Users\user\Desktop\WEB\webpack-template ode_modules\webpack\lib\NormalModule.js:860:5 在 C:\Users\user\Desktop\WEB\webpack-template ode_modules\loader-runner\lib\LoaderRunner.js:400:11 在 C:\Users\user\Desktop\WEB\webpack-template ode_modules\loader-runner\lib\LoaderRunner.js:252:18 在 runSyncOrAsync (C:\Users\user\Desktop\WEB\webpack-template ode_modules\loader-runner\lib\LoaderRunner.js:156:3)
在 iterateNormalLoaders (C:\Users\user\Desktop\WEB\webpack-template ode_modules\loader-runner\lib\LoaderRunner.js:251 :2) 在 C:\Users\user\Desktop\WEB\webpack-template ode_modules\loader-runner\lib\LoaderRunner.js:224:4 在 C:\Users\user\Desktop\WEB\webpack-template ode_modules\webpack\lib\NormalModule.js:834:15 在 Array.eval（在创建时评估（C:\Users\user\Desktop\WEB\webpack-template ode_modules apable\lib\HookCodeFactory.js: 33:10), :12:1) 在 runCallbacks (C:\Users\user\Desktop\WEB\webpack-template ode_modules nhanced-resolve\lib\CachedInputFileSystem.js :27:15)
index.js:67 函数.validateOptions [webpack-template]/[pug-loader]/index.js:67:11
index.js:9 对象.load [webpack-template]/[pug-loader]/index.js:9:8
ModuleBuildError：模块构建失败（来自./node_modules/pug-loader/index.js）：
TypeError: options must be an object
index.js:67 函数.validateOptions [webpack-template]/[pug-loader]/index.js:67:11
index.js:9 对象.load [webpack-template]/[pug-loader]/index.js:9:8
NormalModule.js:758 processResult [webpack-模板]/[webpack]/lib/NormalModule.js:758:19
NormalModule.js:860 [webpack-模板]/[webpack]/lib/NormalModule.js:860:5
LoaderRunner.js:400 [webpack-template]/[loader-runner]/lib/LoaderRunner.js:400:11
LoaderRunner.js:252 [webpack-template]/[loader-runner]/lib/LoaderRunner.js:252:18
LoaderRunner.js:156 runSyncOrAsync [webpack-template]/[loader-runner]/lib/LoaderRunner.js:156:3
LoaderRunner.js:251 iterateNormalLoaders [webpack-template]/[loader-runner]/lib/LoaderRunner.js:251:2
LoaderRunner.js:224 [webpack-template]/[loader-runner]/lib/LoaderRunner.js:224:4
NormalModule.js:834 [webpack-模板]/[webpack]/lib/NormalModule.js:834:15
CachedInputFileSystem.js:27 runCallbacks [webpack-template]/[enhanced-resolve]/lib/CachedInputFileSystem.js:27:15
child-compiler.js:169 [webpack-template]/[html-webpack-plugin]/lib/child-compiler.js:169:18
Compiler.js:551 finalCallback [webpack-模板]/[webpack]/lib/Compiler.js:551:5
Compiler.js:577 [webpack-模板]/[webpack]/lib/Compiler.js:577:11
Compiler.js:1196 [webpack-模板]/[webpack]/lib/Compiler.js:1196:17
Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync] [webpack-template]/[tapable]/lib/Hook.js:18:14
Compiler.js:1192 [webpack-模板]/[webpack]/lib/Compiler.js:1192:33
Compilation.js:2787 finalCallback [webpack-template]/[webpack]/lib/Compilation.js:2787:11
Compilation.js:3092 [webpack-模板]/[webpack]/lib/Compilation.js:3092:11
大家好，我学习webpack，我需要连接pug-loader。但是在终端的安装时间写了关于 pug-load 的消息（我使用的是 pug-loader），我没有注意它并继续。结果，程序集无法编译
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
let mode = 'development'
if (process.env.NODE_ENV === 'production') {
mode = 'production'
}
console.log(mode + ' mode')
module.exports = {
mode: mode,
output: {
assetModuleFilename: "assets/[hash][ext][query]",
clean: true,
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css'
}),
new HtmlWebpackPlugin({
template: "./src/index.pug"
})],
module: {
rules: [ {
test: /\.html$/i,
loader: "html-loader",
},
{
test: /\.(sa|sc|c)ss$/,
use: [
(mode === 'development') ? "style-loader" : MiniCssExtractPlugin.loader,
"css-loader",
{loader: "postcss-loader"},
"sass-loader",
],
},
{
test: /\.(png|svg|jpg|jpeg|gif|)$/i,
type: 'asset/resource',
},
{
test: /\.(woff|woff2|eot|ttf|otf|)$/i,
type: 'asset/resource',
},
{
test: /\.pug$/,
loader: 'pug-loader',
exclude: /(node_modules|bower_components)/,
},
]
},
}
pug-loader 没有维护超过 5 年。 除了组合（html-webpack-plugin、mini-css-extract-plugin、pug-loader、html-loader），您可以使用现代 pug-plugin 简化 Webpack 配置。
有适用于您的用例的工作示例。
./src/index.pug
html
head
//- load source styles here
link(href=require('./style.scss') rel='stylesheet')
//- load source scripts here and/or in body
script(src=require('./main.js') defer='defer')
body
h1 Hello World!
生成的HTML：
<html>
<head>
<link href="css/style.f57966f4.css" rel="stylesheet">
<script src="js/main.b855d8f4.js" defer="defer"></script>
</head>
<body>
<h1>Hello Pug!</h1>
</body>
</html>
Webpack 配置
const path = require('path');
const PugPlugin = require('pug-plugin');
const mode = process.env.NODE_ENV === 'production' ? 'production' : 'development';
module.exports = {
mode,
output: {
path: path.join(__dirname, 'dist/'),
assetModuleFilename: "assets/[hash][ext][query]",
clean: true,
},
entry: {
// define Pug files here
index: './src/index.pug', // => dist/index.html
},
plugins: [
new PugPlugin({
js: {
filename: 'js/[name].[contenthash:8].js', // output filename of JS
},
css: {
filename: 'css/[name].[contenthash:8].css', // output filename of CSS
},
}),
],
module: {
rules: [
{
test: /\.pug$/,
loader: PugPlugin.loader,
},
{
test: /\.(sa|sc|c)ss$/,
use: ['css-loader', 'postcss-loader', 'sass-loader'],
},
{
test: /\.(png|svg|jpg|jpeg|gif|)$/i,
type: 'asset/resource',
},
{
test: /\.(woff|woff2|eot|ttf|otf|)$/i,
type: 'asset/resource',
},
],
},
};
Pug 插件自动从 Pug 模板中直接指定的源文件中提取 CSS 和 JS。