Question

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

请提供您的域。

用户：www.google.com
请提供您广泛的URL。

用户：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.');
    });
});

问题：

现在假设我有4个用户，每个用户都在其中生成他们在dist文件夹中的js捆绑文件，我将有四个文件，例如这个：widget4321.js, widget3345.js, widget1123.js, widget4321.js

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

注意：如果有任何感谢，请随时提供另一种解决方案。

Answer 1

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

域名：www.google.com hugeUrl：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>

然后，使用小部件中的变量。

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

Answer 2

由于您使用的是'widget.[contenthash].js'内容哈希，因此每次文件内容更改时它都会更改，因此您无法将文件与用户关联

您可以做的是代替使用contenthash这样的事情

{
  output {
    filename: `widget.${someUserSpecificId}.js`
    ...
    ...
  }
}

现在的问题是如何通过配置中的someUserSpecificId。为此，您可以使用Webpack的environment-options

如果您导出函数而不是像这样的对象，则现在处于webpack配置中

function (env, arg) {
  return {
    ...
    ...
    output: {
      filename: `widget.${env.someUserSpecificId}.js`
      ...
      ...
  }
}

现在您可以通过

之类的cli选项传递env.someUserSpecificId

 webpack --env.someUserSpecificId=foo

现在您可以根据需要为任何用户更新任何捆绑包

注意，请注意，您不会在文件名中使用实际的用户ID，因为它会向客户端公开，而是为每个用户生成一些随机ID，可以在客户端公开，并且每个用户唯一用户

上面介绍的

UPDATE 方法非常适合更新某些特定的包，但是如果您想一次更新所有包，则必须稍微调整一下逻辑

您可以执行此操作，而不是通过命令行参数传递someUserSpecificId

const usersIdArray = ['userId1', 'userId2', ...otherUsersId];

const webpackConfig = userIdArray.map(someUserSpecificId => {
  return {
    ...
    ...
    output: {
      filename: `widget.${someUserSpecificId}.js`
      ...
      ...
    }
  };
});

module.exports = webpackConfig;

它将执行的操作是给您多个webpack配置的数组，您可以将该数组直接传递给webpack，然后webpack将根据各自的配置see exporting multiple configuration

更新所有文件

注意：如果您有大量用户，请分小批处理任务

其他优化想法，因为您正在服务器上运行此任务，所以最好考虑进行一些优化以减少重复性任务，我现在想到的一个想法是，您可以分两部分构建捆绑软件。将包含用户特定的配置2.将包含您的代码

因此，如果用户更改其配置，则只需要构建该部分，而更改配置，则也只需构建一次，因为所有用户的通用代码都是相同的（例如theme）

当您创建最终捆绑包时，只需将用户特定的配置与代码结合起来即可，这样可以减少重复的任务，并且速度会更快

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

2 个答案: