I have a simple app in which require a user to provide certain pieces of information as follows.
Please provide your domain .
user: www.google.com
Please provide your vast URL.
user: www.vast.xx.com
Please select position. a) Bottom left. b) Bottom right.
user: b) Bottom right
After the user provides these pieces of information the button generate code appears, the user clicks to generate code. He gets the following 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>
Here is my full webpack config file: webpack config
With this script, a user can use it on his website, the important thing here to note is www.mywebisite.com/widget123.js this is bundled js file generated by webpack as follow.
Here is part of my code I use to generate bundled js files using webpack by running a command 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),
}
}]
To generate the bundled js file each time a user generates a new code I need to run npm run build to do that I am using WebSockets to send a command to the server as follows.
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>
Here is 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.');
});
});
Problem :
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
Assume I have changed the color of my widget, How do I update these files using webpack?.
Note: please be free to provide another solution if you have one thanks.
See Question&Answers more detail:os
