个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 20:07:44 24 4
gpt4 key购买 nike

我目前正在将模板动态添加到我的 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)

prepareHtml 函数正在生成“pages”变量。

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

最佳答案

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

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

否则...最简单的方法就是在您的自述文件中注明，如果您添加新页面，您必须重新启动监视进程。 :)

关于javascript - 我可以在 webpack --watch 重建后重新加载 webpack 插件吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52705190/

24 4 0
文章推荐： javascript - 过滤掉同一键上的对象数组为空 ("")
文章推荐： javascript - 如何动态地在 Jade 中构建一个 jsTree？
文章推荐： javascript - 在 Django 中需要上下文变量的 Javascript 最佳实践
文章推荐： javascript - 使用 GLTFLoader : RangeError: Invalid typed array length: 4 加载 gltf 文件时出错
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com