3

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

这是关于我如何生成 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)
    ]
4

1 回答 1

0

正如我从这个讨论中推断的那样，虽然它仍然是测试版，但html-webpack-plugin在 中进行了一些戏剧性的多入口性能修复。v4.0.0至少更新到它为我修复了性能问题，热重载重新编译甚至未更改的文件。

所以可能将您的版本更改package.json为：

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

其次是：

npm install

应该能解决你的问题。

于 2020-01-16T10:28:30.480 回答