Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: update in readme the list of plugins and loaders #15996

merged 4 commits into from Jul 25, 2022

docs: update in readme the list of plugins and loaders #15996

merged 4 commits into from Jul 25, 2022


Copy link


In are added pug-plugin and modern powerful pug-loader.


This plugin enable to define Pug files in Webpack entry, extracts JS and CSS from sources specified directly in Pug:

const PugPlugin = require('pug-plugin');
module.exports = {
  entry: {
    index: './src/views/index.pug',      // output index.html
    about: './src/views/about/index.pug' // output about.html
    // ..
  plugins: [
    new PugPlugin(/* options */), // enable using Pug files in webpack entry

All source scripts and styles can be required in Pug, e.g.:

link(href=require('./styles.scss') rel='stylesheet')

Generated HTML contains hashed CSS and JS output filenames:

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

This plugin make much easy the usage Pug with Webpack.
Test coverage > 99%.


The original pugjs/pug-loader has problems:

The alternative @webdiscus/pug-loader can do absolutely everything that pugjs/pug-loader can (100% compatible with pugjs/pug-loader), plus:

  • compiles Pug to template function (as pugjs/pug-loader), but in CommonJS or ESM
  • renders Pug to JS module with exports as HTML string, useful for use in JS
  • renders Pug to pure HTML string, useful for use with Vue, React, Angular
  • pass custom data in Pug templates
  • supports for indent in templates of Vue, React:
    <template lang='pug'>
      h1 Hello Pug!
      p Use the '@webdiscus/pug-loader'
  • resolves all required resoures
  • watching of changes in all dependencies
  • test coverage > 98%


Instead of install size display publish size of a package.
E.g. the pug-plugin have public size only 100 KB, but install size is 8 MB, becase contains docs with many resources, has much tests with real files to test: images, fonts, etc.

What kind of change does this PR introduce?
docs: update readme

Did you add tests for your changes?
tests are not needs for readme

Does this PR introduce a breaking change?

What needs to be documented once your changes are merged?

Copy link

For maintainers only:

  • This needs to be documented (issue in webpack/ will be filed when merged)
  • This needs to be backported to webpack 4 (issue will be created when merged)

Copy link

@webdiscus Thanks for your update.

I labeled the Pull Request so reviewers will review it again.

@alexander-akait Please review the new changes.

Copy link
Contributor Author

fixed pretty lint warning in readme
now the npm run lint is passed

Copy link
Contributor Author

the failed "Test / integration (windows-latest, 10.x, b)" occurs by all PRs.
I haven't changed the code.
It seems to be a general issue in the main branch.

Copy link

Hi @webdiscus.

Just a little hint from a friendly bot about the best practice when submitting pull requests:

Don't submit pull request from your own main branch. It's recommended to create a feature branch for the PR.

You don't have to change it for this PR, just make sure to follow this hint the next time you submit a PR.

Copy link

Just ingore random CI errors

@sokra sokra merged commit fcb0e35 into webpack:main Jul 25, 2022
45 of 47 checks passed
Copy link

sokra commented Jul 25, 2022


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet

Successfully merging this pull request may close these issues.

None yet

4 participants