我可以在 webpack --watch 重建后重新加载 webpack 插件吗？答案

【问题标题】：Can I Reload webpack plugins after webpack --watch rebuild?我可以在 webpack --watch 重建后重新加载 webpack 插件吗？
【发布时间】：2019-03-13 07:07:57
【问题描述】：

我目前正在向我的HtmlWebpackPlugin 动态添加模板，如下所示：

var PROD = JSON.parse(process.env.PROD_ENV || '0');

function prepareHtml(){

    console.log(PROD);
    pages = [];
    config = require('./src/core/js/config-modulo');
    var size = Object.keys(config).length;
    for(var i = 0; i<size; i++){

        for(var j = 0; j<config[i+1].num_pages; j++){
            if(!(fs.existsSync('./src/und'+(i+1)+'/'+(j+1)+'.html'))){
                var modelo = '<html lang="pt-br">\n<head>\n<meta charset="UTF-8">\n<meta name="viewport" content="width=device-width, initial-scale=1.0">\n<title>Livro On-line</title>\n<script type="text/javascript" src="config-livro.js"></script>\n</head>\n<body>\n<div class="page">\n<div class="header"></div>\n<div class="conteudo">\n<!-- ================================================================== -->\n<!-- ================================================================== -->\n</div> <!-- End conteudo -->\n</div> <!-- End page -->\n<!-- Scripts -->\n</body>\n</html>';
                fs.outputFileSync('./src/und'+(i+1)+'/'+(j+1)+'.html',modelo);
            }
            var page = new HtmlWebpackPlugin({
                filename: '../../und'+(i+1)+'/'+(j+1)+'.html',
                template: './src/und'+(i+1)+'/'+(j+1)+'.html',
                });
            pages.push(page);
        }
        var newconfig = 'UNIDADE_NUMBER = '+(i+1)+';\n'+
                        'UNIDADE_NAME = "'+config[i+1].nome_unidade+'";\n'+
                        'LINK_PDF = "'+config[i+1].link_pdf+'";\n'+
                        'PAGES_TOTAL = '+config[i+1].num_pages+';';

        var caminho = 'dist/und'+(i+1); 

        if(PROD){ 
            console.log(PROD);
            fs.outputFile(caminho+'/config-livro.js', newconfig, function (err) {
                if(err) console.log(err);
            });
        }
    }
    delete require.cache[require.resolve('./src/core/js/config-modulo')];
    console.log(pages);
}

调用此prepareHtml() 函数，然后将其结果连接到我的插件数组。

问题是当 webpack --watch 被触发时，该功能工作正常但插件的配置没有更新，我知道这是因为新文件没有被跟踪或处理。

我使用WebpackPreBuildPlugin 在每次构建时重新运行该函数。

有什么方法可以在每次触发 webpack --watch 时“重建”我的插件？

编辑：我正在添加这样的插件：

plugins: [
        new WebpackPreBuildPlugin(function(stats) {
            prepareHtml();
        }),
        new ExtractTextPlugin({
            filename: '../css/livro.css',
            disable: false,
            allChunks: true
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
          })
    ].concat(pages)

“pages”变量由prepareHtml 函数生成。

我知道这是可行的，因为我第一次运行 webpack --watch 所有文件都生成并被正确跟踪，问题确实是动态添加新文件，函数运行正常，“pages”数组被正确创建，它只是没有被输入到 plugins 数组中。

【问题讨论】：

我看不出您实际上会将这些HtmlWebpackPlugins 添加到插件列表的哪个位置？
我使用 .concat(pages) 添加在函数内部创建的实例数组（它是一个全局变量）

标签： javascript node.js webpack gulp

【解决方案1】：

我认为这并不容易，因为plugins are just things that are "applied" to the compiler internally，即他们在编译器中设置了挂钩；您必须小心地将新插件应用到自己的编译器中。

相反，如果您真的需要此功能，我建议您编写自己的 Webpack 插件，将这些动态创建的 HtmlWebpackPlugin 实例包装起来，并在 HtmlWebpackPlugin 的同一阶段运行它们，并使用您的动态配置。

否则...在自述文件中最容易说明的是，如果添加新页面，则必须重新启动监视过程。 :)

【讨论】：