how to add hooks after bundle update - node.js

Question

EDIT:I need to directly generate <script type="text/javascript" src="..."></script> format to a text file which my web app(django or rails) template engine can directly include. So a json file seems not ok.
After webpack update the js file in webpack --progress --colors --watch mode, I want to :
Create a copy with hashed-filename to specified path.
execute some nodejs code that lists all filenames in specified directory and writes them to a text file.
Currently my config file is:
module.exports = {
entry: "./index.js",
output: {
path: __dirname,
filename: "bundle.[hash].js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" },
{ test: /\.scss$/, loaders: ["style", "css", "sass"]},
],
}
};
For example, every time webpack generate a bundle.[hash].js file, it will first make its copy to /bar, then check all filenames in /bar and write these filenames to /foo/bar/js.txt in this format:
<script type="text/javascript" src="/bar/bundle.sdfklsld.js"></script>
<script type="text/javascript" src="/bar/bundle.jkljsdfd.js"></script>
I know this maybe done by bundle-update, but it's poorly documented.

Answer 1

assets-webpack-plugin will be solution for you.
Your webpack.config.js with this plugin should look something like this:
const path = require('path');
const AssetsPlugin = require('assets-webpack-plugin');
const assetsPluginInstance = new AssetsPlugin({
path: path.join(__dirname, 'foo', 'bar'),
filename: 'js.json'
});
module.exports = {
entry: "./index.js",
output: {
path: path.resolve(__dirname, 'bar'),
filename: "bundle.[hash].js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" },
{ test: /\.scss$/, loaders: ["style", "css", "sass"]},
],
},
plugins: [
assetsPluginInstance
]
};
Now in path bar/ you should have file bundle.sdfklsld.js.
In file foo/bar/js.json you will have:
{
"main": {
"js": "/bar/bundle.sdfklsld.js"
}
}
From that point you are good to go and create your script tags with proper path to bundle files.
Edit - create file .txt with script tags
If you want to create your assets as a plain text file you can use processOutput method in assets-webpack-plugin.
const assetsPluginInstance = new AssetsPlugin({
path: path.join(__dirname, 'foo', 'bar'),
filename: 'js.txt', // change to .txt
// it can be little different in your scenario
// - currently I'm showing only one file,
// but you can tweak it to accept array of files
processOutput: function (assets) {
return `<script type="text/javascript" src="${assets.main.js}"></script>`;
}
});