gpt4 book ai didi

javascript - 如何使用 webpack 更新多个捆绑的 js 文件?

转载 作者:行者123 更新时间:2023-12-04 02:02:23 26 4
gpt4 key购买 nike

我有一个简单的应用程序,其中要求用户提供如下某些信息。

  • 请提供您的域名。

    用户:www.google.com
  • 请提供您庞大的网址。

    用户:www.vast.xx.com
  • 请选择职位。
    a) 左下角。
    b) 右下角。

    用户: b) 右下

  • 在用户提供这些信息后,按钮 generate code出现,用户点击生成代码。他得到以下代码。
     (function (w,d,s,o,f,js,fjs) {
    w['JS-Widget']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
    js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
    js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
    }(window, document, 'script', 'mw', 'www.mywebisite.com/widget123.js'));
    mw('init', { someConfiguration: 448 });
    mw('message', 'x');
    </script>

    这是我完整的 webpack 配置文件: webpack config
    有了这个脚本,用户可以在他的网站上使用它,这里要注意的重要一点是 www.mywebisite.com/widget123.js这是由 webpack 生成的捆绑 js 文件,如下所示。

    这是我用来通过运行命令 npm run build 使用 webpack 生成捆绑 js 文件的部分代码
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    // ...
    return [{
    entry: './src/main.js',
    plugins: [
    new HtmlWebpackPlugin({ title: 'Caching' }),
    ],
    output: {
    **filename: 'widget.[contenthash].js',**
    path: path.resolve(bundleOutputDir),
    }
    }]

    要在每次用户生成新代码时生成捆绑的 js 文件,我需要运行 npm run build为此,我使用 WebSockets 向服务器发送命令,如下所示。
    HTML (client)

    <html>
    <body>
    <button onClick="sendCommands()"> Generate Code</button>
    </body>
    <script>

    const ws = new WebSocket('ws://localhost:9898/');
    function sendCommands(){
    ws.onopen = function() {
    console.log('WebSocket Client Connected');
    ws.send('npm run build');
    };
    }
    ws.onmessage = function(e) {
    console.log("Received: '" + e.data + "'");
    };

    </script>
    </html>

    这是 Server.js
    const http = require('http');
    const WebSocketServer = require('websocket').server;
    const util = require('util');
    const exec = util.promisify(require('child_process').exec);

    const server = http.createServer();
    server.listen(9898);

    const wsServer = new WebSocketServer({
    httpServer: server
    });

    wsServer.on('request', function(request) {
    const connection = request.accept(null, request.origin);

    connection.on('message', function(message) {
    console.log(message.utf8Data);
    const { stdout, stderr } = await exec(message.utf8Data);
    console.log('stdout:', stdout);
    console.log('stderr:', stderr);
    connection.sendUTF('Hi this is WebSocket server!');
    });
    connection.on('close', function(reasonCode, description) {
    console.log('Client has disconnected.');
    });
    });

    问题:

    Now let assume I have 4 users in which each of them have generated their own js bundle file in dist folder I will have four files like this: widget4321.js, widget3345.js, widget1123.js, widget4321.js



    假设我更改了小部件的颜色,如何使用 webpack 更新这些文件?

    注意:如果您有一个谢谢,请免费提供另一种解决方案。

    最佳答案

    拥有一个小部件文件(由您使用默认配置生成)并使用用户提供的信息作为参数可能会更容易。

    域名:www.google.com
    巨大的网址:www.vast.xx.com
    位置:右下角

     (function (w,d,s,o,f,js,fjs) {
    w['JS-Widget']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
    js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
    js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
    }(window, document, 'script', 'mw', 'www.mywebisite.com/widget123.js'));
    mw('init', {
    someConfiguration: 448,
    domainName: 'www.google.com',
    vastUrl: 'www.vast.xx.com',
    position: 'bottom right'
    });
    mw('message', 'x');
    </script>

    之后,使用小部件中的变量。

    然后,更新小部件的颜色将影响所有已安装的小部件并保留用户的配置。

    关于javascript - 如何使用 webpack 更新多个捆绑的 js 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60030506/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com