I'm using pug v2.0.4, webpack v5.75.0 and node v14.15.4 for dev reasons. This is the interested code:
---
title: "Core - Dashboard Builder"
classSidebarHome: active
pageTitle: "Dashboard"
classHeader: unauthorized
---
extends layouts/layout
block content...
And this is my webpack.config.js:
const path = require('path');
const PugPlugin = require('pug-plugin');
module.exports = {
mode: 'none',
entry: {
index: './src/pug/index.pug',
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: 'assets/js/[name].[contenthash:8].js'
},
module: {
rules: [
{
test: /\.pug$/,
loader: PugPlugin.loader, // default method is 'render'
},
{
test: /\.(css|sass|scss)$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(png|jpg|jpeg|ico)/,
type: 'asset/resource',
generator: {
// output filename of images
filename: 'assets/img/[name].[hash:8][ext]',
},
}
]
},
plugins: [
new PugPlugin({
extractCss: {
// output filename of CSS files
filename: 'assets/css/[name].[contenthash:8].css'
},
}),
],
devServer: {
static: './src'
}
};
Instead this is my src folder structure:
- src [root]
- img [2nd-tier]
- js [2nd-tier]
- pug [2nd-tier]
- sass [2nd-tier]
When I run webpack (aka npm run build) the result is an unexpected text error near "Core..." and also if I remove the "variables" from pug file because they are not variables I can't extract assets from entry file and src folder.
What's the problem? Is there someone who can help me reviewing my webpack code? I would like to understand where I'm wrong.