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

[salvatorericcardi]

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? I would like to understand where I'm wrong.

[salvatorericcardi]

Sorry it was my fault. I have other problems with webpack and pug-plugin but this issue can be closed or moved to another issue that I'll open. Bye

[webdiscus]

Hallo @riccardi1997, can you please create a small repo with reproducible issue in next issue.

[salvatorericcardi]

Hello @webdiscus, yes I can.

I need to open an issue as I said but I would like to send you an invitation for access to my repository. Can you accept it so I can post the new issue and quote you?

[webdiscus]

Hi @riccardi1997,

Please, describe new issue in new ticket or change the title and text in this issue, because this issue is a mistake.

[salvatorericcardi]

I edited the original title and question, I hope it's clearer now otherwise ask and I will respond. Sorry for the initial mistake @webdiscus

[webdiscus]

@riccardi1997

I can't understand you problem:

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.

Please create a repo with reproducible issue then I can see you code.

[salvatorericcardi]

If you agree I can give you the access to the repository. I will send you an invitation in a while

[webdiscus]

If you agree I can give you the access to the repository. I will send you an invitation in a while

ok, you can give me an access to your private repo.

[salvatorericcardi]

There is no way to chat so I will type here. You received an invitation. Tomorrow I will leave you how to reproduce the problem because I have to commit before

UPDATES: I just pushed and created a README.md file with details on how to reproduce the issue on release/dev branch. Look there and let me know. We have also a team area where we can talk and once finished we can share the solution here @webdiscus

[webdiscus]

@riccardi1997

I don't have an invite. Please tell me what is the name of the invited repo or github.

[salvatorericcardi]

The invitation was sent yeserday from mpirrongelli of goatfinance. See you inside @webdiscus

[webdiscus]

@riccardi1997

ah i saw this repo and it was a 100% gulp project, w/o pug-plugin. And I left this repo because I thought it was some kind of "left" invite. Now the invitе link is no longer valid.

Can you send me a new invitе?

[salvatorericcardi]

I'm migrating to webpack and this is because I'm using pug-plugin but I'm new to webpack and I can't extract assets as explained. New invitation will arrive in a bit

You have an invitation @webdiscus

[webdiscus]

@riccardi1997

I have completely (90% all Pug files) refactored in your release/dev branch for Webpack + pug-plugin. By me local it works.

I tried to push the new branch in the repo, but it does not work. How can I push the new branch in your repo?

[webdiscus]

This is wrong syntax:

---
title: "Core - Dashboard Builder"
classSidebarHome: active
pageTitle: "Dashboard"
classHeader: unauthorized
---
extends layouts/layout
block content...

Must be: layout.pug

//- use this block to add custom variables from Pug page
block variables

include mixins

doctype html
html(lang="en")

page.pug

extends layouts/layout

//- add your custom variables to layout.pug
append variables
  -
     title = "Core - Dashboard Builder"
     classSidebarHome = "active"
     pageTitle = "Dashboard"
     classHeader = "unauthorized"

block content...

[salvatorericcardi]

Thank you very much, @webdiscus. Anyway you should be able to commit, try now and let me know. I owe you one if that's correct

[webdiscus]

@riccardi1997

Push works only with --force: git push --set-upstream --force origin webpack-pug-plugin

Please, check new webpack-pug-plugin branch in your repo. In my branch I have renamed the directory to webpack.

cd ./webpack 
npm i
npm start

See my comments in code.

[salvatorericcardi]

Well done, It works, thanks @webdiscus! Before to close the issue, can you tell me if I can keep webpack dir only or src folder also? And now I don't need of gulp files anymore, right?

[webdiscus]

@riccardi1997

you nice UI framework works now from ./webpack directory w/o dependences outer.

Following old/unused directories and files can be deleted:

• ./build (new version compile in the ./dist directory, if you need keep it then remove dist from .gitignore)
• ./gulp (is unused)
• ./src (old, is unused)
• ./gulpfile.js (in unused)
• ./static.json (in unused)

To keep clean directory structure move all files and dirs from ./webpack to ./ and then delete empty ./webpack.

Yes, you don't need of gulp files anymore, delete its.

Yet one thing... Don't forget add the postcss-loader to webpack config to use the autoprefixer, if you need it.

Note: you don't need any minimiser for CSS or JS. Webpack minify its self very well in production mode.

[webdiscus]

@riccardi1997

can the issue be closed?

[salvatorericcardi]

@webdiscus Yes, u can