我有一个项目在我的开发过程中使用 webpack 作为 bundler 和 webpack-dev-server。我使用 Html-webpack-plugin 将我的 30 个 pug 文件编译成 html 但是当与 webpack-dev-server 一起使用时，重新编译时间很长，可能需要 500 万。似乎 webpack 编译了我所有的哈巴狗文件，而不是只编译我更改过的文件。

这是一个关于我如何生成 html 文件的片段

   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;

我在我的 webpack.config.babel.js 文件中这样使用它

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

最佳答案

正如我从 this discussion 推断的那样, html-webpack-plugin 在 v4.0.0 中进行了一些显着的多入口性能修复，尽管它仍处于测试阶段。至少更新到它修复了我的性能问题，热重载重新编译甚至未更改的文件。

因此可能将 package.json 中的版本更改为:

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

其次是:

npm install

应该可以解决您的问题。

https://stackoverflow.com/questions/54231411/