Can't extract html, css, js and images from pug file [webpack]

148 Views Asked by At

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.

0

There are 0 best solutions below