how to add hooks after bundle update

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 :

1. Create a copy with hashed-filename to specified path.
2. 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>`;
    }
});