【发布时间】：2020-05-18 16:39:48
【问题描述】：
我有一个简单的应用程序，其中要求用户提供以下某些信息。
-
请提供您的域名。
用户：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.');
});
});
问题：
现在假设我有 4 个用户，每个用户都生成了 他们自己的 js 捆绑文件在 dist 文件夹中我将有四个文件，例如 这个：
widget4321.js, widget3345.js, widget1123.js, widget4321.js
假设我更改了小部件的颜色，如何使用 webpack 更新这些文件？
注意：如果您有其他解决方案，请随时提供，谢谢。
【问题讨论】：
-
那么不要使用
contenthash。使用用户名的哈希值，这样每个人都将拥有自己的唯一 URL，该 URL 将随着时间的推移保持稳定而不会暴露详细信息。 -
如果它是关于样式不是使用javascript动态加载css选项，那么当你更新你的服务上的css时，所有客户端都将使用新的css。如果您想将一些功能添加到您的小部件中（也许您更新了 javascript），那么您可以拥有一个小型数据库来存储用户信息和生成的捆绑文件之间的引用。然后，当您想要更新文件时，您重新编译它们并用新内容覆盖。
-
@pawel cam 你提供了一些例子吗？
-
@codtex 现在我该怎么做？您可以在代码示例中提供您的解决方案吗？我是 webpack 的新手，谢谢
-
可能类似于在 env 中设置用户数据的哈希值，例如
UID=df98ad npm run build然后filename: widget${process.env.UID}.js在 webpack 配置中，或者使用widget.js作为文件名和path: dist/${UID}/。要在代码库更改后重建小部件，您还需要保留原始有效负载并重新使用它，例如将它们存储为buildparams_${UID}.json
标签： javascript html node.js webpack websocket