[webpack-dev-middleware] HookWebpackError: self is not defined about pug-plugin HOT 7 CLOSED

I will keep watch for the new version with fixed WEBPACK SERVE config as its number 1 requirement for me. Till the time I will continue with the html-webpack-plugin.

Enjoy your holidays 🎉

Wish you Merry Christmas & Happy New Year 🥳

from pug-plugin.

Okay, when is the launch of next version?

In lunary 2022. Now we have Christmas and Sylvester :-)

Also, how can we dynamically inject JS and CSS (from SCSS) into the templates?

Add JavaScript source in template

script
  include ./script.js

Add script and link in template

I'm not sure whether following works:

head
  link(rel='stylesheet' href=require('./path/to/src/main.scss'))
  script(src='./path/to/src/main.js')

to replace original asset names with hached names like main-fjg234g52j4.js or styles-fdwdf6w876w.css can be used an asstes manifest plugin to replace names.

I compile the JS, SCSS via Webpack and add compiled names of assets in template:

head
  link(rel='stylesheet' href='assets/css/styles.css')
  script(src='assets/js/main.js')

Usage JavaScript Library in template

say-hello.js

module.exports = function (name) {
  return `Hello ${name}!`;
}

pug template

- var sayHello = require('./say-hello.js')
h1 #{ sayHello('pug') }

Usage JSON data in template

data.json

[
  { "id": 1, "name": "abc" },
  { "id": 2, "name": "xyz" }
]

pug template

- var myData = require('./data.json')
each item in myData
  div #{item.id} #{item.name}

P.S. more information and examples see by pug-loader

from pug-plugin.

Hello @kumardeepakxyz,

new version 1.2.3 is released.

from pug-plugin.

Hello @kumardeepakxyz,

thank you for usage.
Yes, I know about this limitation.
The webpack serve is currently not supported yet.
But I work to add this feature.
The support webpack serve will be added in next version of the plugin.

Currently works following modes:

webpack --mode=production
webpack --mode=development
webpack --watch

from pug-plugin.

Okay, when is the launch of next version?

Also, how can we dynamically inject JS and CSS (from SCSS) into the templates?

from pug-plugin.

@kumardeepakxyz Happy New Year!

Can you please try new version 1.2.0, update your package.json.
Now should work the webpack serve.

You can try run the worked example:

clone https://github.com/webdiscus/pug-plugin.git
cd ./examples
npm i
npm run start

NEW: now supports dynamically require of styles directly in pug template without define the scss in webpack entry.
add to pug:

link(href=require('~Styles/styles.scss'))

add to webpack.config.js:

...
entry{
  index: './src/templates/index.pug', // the pug template where is required style
},
plugins: [
    new PugPlugin({
      modules: [
        PugPlugin.extractCss(), // add the plugin module to extract CSS
      ],
    }),
],
module: {
    rules: [
      {
        test: /\.pug$/,
        loader: PugPlugin.loader,
      },
      {
        test: /\.(css|sass|scss)$/,
        type: 'asset/resource', // add this for usage in pug, like `link(href=require('~Styles/my-styles.scss'))`,
        generator: {
          filename: 'assets/css/[name].[hash].css', // save extracted style in public path
        },
        use: [ 'css-loader', 'sass-loader' ],
      },
    ],
},
...

Now is no needed more the buggy mini-css-extract-plugin ;-)

For more details see in the example hello world

from pug-plugin.

Also, how can we dynamically inject JS and CSS (from SCSS) into the templates?

Hello @kumardeepakxyz,

I have new release 2.1.0 with dynamically injection of JS and SCSS.
Now is possible to use the source files of styles and scripts directly in pug.

link(href=require('./styles.scss') rel='stylesheet')
script(src=require('./main.js'))

The generated HTML contains hashed CSS and JS output filenames.

<link rel="stylesheet" href="/assets/css/styles.05e4dd86.css">
<script src="/assets/js/main.f4b855d8.js"></script>

The required styles and scripts in pug do not need to define in the webpack entry. All required resources will be automatically handled by webpack.

The example of webpack.config.js:

const PugPlugin = require('pug-plugin');
module.exports = {
  entry: {
    index: './src/index.pug' // extract html, css and js from pug
  },

  output: {
    path: path.join(__dirname, 'dist/'),
    publicPath: '/',
    // output filename for JS files
    filename: 'assets/js/[name].[contenthash:8].js'
  },

  plugins: [
    new PugPlugin({
      modules: [
        PugPlugin.extractCss({
          // output filename for CSS files
          filename: 'assets/css/[name].[contenthash:8].css'
        })
      ]
    })
  ],

  module: {
    rules: [
      {
        test: /\.pug$/,
        loader: PugPlugin.loader,
        options: {
          method: 'render', // for fastest compilation
        }
      },
      {
        test: /\.(css|sass|scss)$/,
        use: ['css-loader', 'sass-loader']
      }
    ],
  },
  // ...
};

from pug-plugin.