如何使用webpack更新多个捆绑的js文件？

Question

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

请提供您的域名。
用户：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>

使用此脚本，用户可以在其网站上使用它，这里要注意的重要一点是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.');
    });
});
问题：

现在假设我有4个用户，其中每个人都在dist文件夹中生成了自己的js捆绑文件，我将有四个文件，如下所示：widget4321.js, widget3345.js, widget1123.js, widget4321.js

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

我有一个简单的应用程序，其中要求用户提供以下某些信息。请提供您的域名。用户：www.google.com，请提供您广泛的网址。用户：www.vast.xx ....

Answer 1

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

如何使用webpack更新多个捆绑的js文件？

问题描述投票：1回答：1

1个回答

最新问题

如何使用webpack更新多个捆绑的js文件？

问题描述 投票：1回答：1

1个回答

最新问题

问题描述投票：1回答：1