Skip to content

v3.12.0

Latest
Compare
Choose a tag to compare
@webdiscus webdiscus released this 25 May 17:01
· 7 commits to master since this release
371f46c

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.