Html-Webpack-Plugin very slow on multiple pug file

Viewed 1011

I have a project that use webpack as bundler and webpack-dev-server during my development process. I use Html-webpack-plugin the compile my 30 pug file into html but when used with webpack-dev-server, recompile time is very long, maybe 5mn. Seems that webpack compile all my pug file instead of compiling just the file that I have changed.

Here is a snipet on how I generate html file

   import HtmlWebpackPlugin from 'html-webpack-plugin';
   import path from 'path';
   import fs from 'fs';

   export const renderHtml = (programs) => {
    const fileList = [];
    fs.readdirSync(path.join(__dirname, `../programs/${programs}/pug/`)).forEach(file => {
        if (/\.pug$/.test(file)) {
            const name = `${file}`.replace('.pug', '');
            fileList.push({
                name,
                file
            });
        }
    });
    return fileList.map(file => {
        return new HtmlWebpackPlugin({
            filename: file.name + '.html',
            template: path.join(__dirname, `../programs/${programs}/pug/${file.file}`)
        });
    });
   };

   export default renderHtml;

And I use it like this in my webpack.config.babel.js file

plugins: [
        ...
        new VueLoaderPlugin(),
        ...renderHtml(programs)
    ]
1 Answers

As I infer from this discussion, html-webpack-plugin had some dramatic multi-entry performance fixes in v4.0.0, though it's still beta. At least updating to it fixed performance issues for me with hot reload re-compiling even unchanged files.

So possibly changing your version in package.json to:

"html-webpack-plugin": "^4.0.0-beta.11",

Followed by:

npm install

Should solve your issue.

Related