Grunt、Webpack 和 DllPlugin

Question

I'm having trouble visualizing how I can leverage the DllPlugin/DllReferencePlugin with Webpack while also using Grunt for the building. For those without knowledge, the DllPlugin creates a separate bundle that can be shared with other bundles. It also creates a manifest file (important) to help with the linking. Then, the DllReferencePlugin is used by another bundle when building to grab the previous made DllPlugin Bundle . To do this, it requires the manifest file created previously.

In Grunt, this would require the manifest file created before grunt even runs, no? Heres a simplified code example:

webpack.dll.js

// My Dll Bundles, which creates
// - ./bundles/my_dll.js
// - ./bundles/my_dll-manifest.json
module.exports = {

    entry: {
        my_dll : './dll.js'
    },
    // where to send final bundle
    output: {
        path: './bundles',
        filename: "[name].js"
    },
    // CREATES THE MANIFEST
    plugins: [
        new webpack.DllPlugin({
            path: "./bundles/[name]-manifest.json",
            name: "[name]_lib"
        })
    ]
};

webpack.app.js

// My Referencing Bundle, which includes
// - ./bundles/app.js
module.exports = {

    entry: {
        my_app : './app.js'
    },
    // where to send final bundle
    output: {
        path: './bundles',
        filename: "[name].js"
    },
    // SETS UP THE REFERENCE TO THE DLL
    plugins: [
        new webpack.DllReferencePlugin({
          context: '.',
          // IMPORTANT LINE, AND WHERE EVERYTHING SEEMS TO FAIL
          manifest: require('./bundles/my_dll-manifest.json')
        })
    ]
};

If you look in the second section, webpack.app.js , I've commented where everything would seem to fail in grunt. For the DllReferencePlugin to work, it needs the manifest file from the DllPlugin, but in a Grunt workflow, grunt will load both of these configurations on initialization of grunt itself, causing the manifest: require('./bundles/my_dll-manifest.json') line to fail, because the previous grunt step that builds webpack.dll.js has not completed, meaning manifest does not yet exist.

Answer 1

var path = require("path");
var util = require('util')
var webpack = require("webpack");

var MyDllReferencePlugin = function(options){
    webpack.DllReferencePlugin.call(this, options);
}

MyDllReferencePlugin.prototype.apply = function(compiler) {
    if (typeof this.options.manifest == 'string') {
        this.options.manifest = require(this.options.manifest);
    }

    webpack.DllReferencePlugin.prototype.apply.call(this, compiler);
};


// My Referencing Bundle, which includes
// - ./bundles/app.js
module.exports = {

    entry: {
        my_app : './app.js'
    },
    // where to send final bundle
    output: {
        path: './bundles',
        filename: "[name].js"
    },
    // SETS UP THE REFERENCE TO THE DLL
    plugins: [
        new MyDllReferencePlugin({
          context: '.',
          // IMPORTANT LINE, AND WHERE EVERYTHING SEEMS TO FAIL
          manifest: path.resolve('./bundles/my_dll-manifest.json')
        })
    ]
};