v3.12.0

Cumulative Release v3.6.0 - v3.12.0

Features

• Added support for the css-loader option exportType as css-style-sheet.
• Added entryFilter option to include or exclude entry files when the entry option is the path.
• Added support the CSS Modules for styles imported in JS using the css-loader modules option.
  Required: css-loader >= 7.0.0
  The CSS module rule in the webpack config:

  {
    test: /\.(css)$/,
    use: [
      {
        loader: 'css-loader',
        options: {
          modules: {
            localIdentName: '[name]__[local]__[hash:base64:5]',
            exportLocalsConvention: 'camelCase',
          },
        },
      },
    ],
  },

  CSS:

  .red {
    color: red;
  }
  .green {
    color: green;
  }

  Using in JS:

  // the styles contains CSS class names: { red: 'main__red__us4Tv', green: 'main__green__bcpRp' }
  import styles from './main.css';

• Added support for dynamic import of styles

  const loadStyles = () => import('./component.scss');
  loadStyles();
  

• Added (for Pug) experimental (undocumented) syntax to include (using ?include query) compiled CSS directly into style tag to allow keep tag attributes

  style(scope='some')=require('./component.scss?include')

  will be generate

  <style scope="some">
    ... CSS ...
  </style>

• Added the possibility to add many post processes. Next postprocess receives the result from previous.
  So you can extend this plugin with additional default functionality.

  class MyPlugin extends HtmlBundlerPlugin {
    init(compiler) {
      MyPlugin.option.addProcess('postprocess', (content) => {
        // TODO: modify the generated HTML content
        return content;
      });
    }
  }
  
  module.exports = {
    plugins: [
      new MyPlugin({
        entry: {
          index: './src/index.html',
        },
      }),
    ],
  };

  This feature is used in the pug-plugin for pretty formatting generated HTML.
  See an example in the test case.
• Added resolving resource files in an attribute containing the JSON value using the require() function,
  source template:

  <a href="#" data-image='{ "alt":"image", "imgSrc": require("./pic1.png"), "bgImgSrc": require("./pic2.png") }'> ... </a>

  generated HTML contains resolved output assets filenames:

  <a href="#" data-image='{ "alt":"image", "imgSrc": "img/pic1.da3e3cc9.png", "bgImgSrc": "img/pic2.e3cc9da3.png" }'> ... </a>

Bug Fixes

• Fixed issue when used js dynamic import with magic comments /* webpackPrefetch: true */ and using the plugin option css.inline=true, #88
• Fixed ansi colors for verbose output in some terminals.
• Fixed extraction CSS from styles imported in dynamically imported JS.
• Fixed define the unique instance name for the plugin as HtmlBundlerPlugin instead of Plugin.
• Fixed catching of the error when a peer dependency for a Pug filter is not installed.
• Fixed resolving asset files on windows.
• Fixed avoid recompiling all entry templates after changes of a non-entry partial file, pug-plugin issue.