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

杜嘉木

2023-03-14

问题内容：

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

请提供您的域名。

**用户：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文件，如下所示。

这是我的代码的一部分，我通过运行命令使用webpack生成捆绑的js文件 npm run build

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更新这些文件？

注意：如果您有任何感谢，请随时提供其他解决方案。

问题答案：

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

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

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

现在的问题是，您将如何通过someUserSpecificIdin配置。为此，您可以使用Webpack的环境选项

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

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

现在您可以通过env.someUserSpecificIdwith cli选项，例如

 webpack --env.someUserSpecificId=foo

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

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

*上面描述的 *UPDATE 方法对于更新某些特定的包是很有用的，但是如果您想一次更新所有包，则必须稍微调整一下逻辑

无需传递someUserSpecificIdfrom命令行参数，您可以执行此操作

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

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

module.exports = webpackConfig;

它会做什么，它将为您提供多个webpack配置的数组，您可以将该数组直接传递给webpack，然后webpack将根据各自的配置更新所有文件，请参阅导出多个配置

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

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

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

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

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

相关阅读

相关文章

相关问答

相关工具

相关文档