【问题标题】:Grunt, Webpack, and the DllPluginGrunt、Webpack 和 DllPlugin
【发布时间】:2016-05-01 20:14:46
【问题描述】:

我无法想象如何将DllPlugin/DllReferencePlugin 与 Webpack 结合使用,同时还使用 Grunt 进行构建。对于那些不了解的人,DllPlugin 创建一个单独的包,可以与其他包共享。它还创建一个清单文件(重要)来帮助链接。然后,DllReferencePlugin 在构建时被另一个包使用以获取先前制作的 DllPlugin 包。为此,它需要之前创建的清单文件。

在 Grunt 中,这需要在 grunt 运行之前创建清单文件,不是吗?这是一个简化的代码示例:

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')
        })
    ]
};

如果您查看第二部分,webpack.app.js,我已经评论了一切似乎都会失败的地方。为了使 DllReferencePlugin 工作,它需要来自 DllPlugin 的清单文件,但在 Grunt 工作流中,grunt 将在 grunt 自身初始化时加载这两个配置,导致 manifest: require('./bundles/my_dll-manifest.json') 行失败,因为之前构建的 grunt 步骤webpack.dll.js 尚未完成,表示清单尚不存在。

【问题讨论】:

    标签: javascript gruntjs webpack dllplugin dllreferenceplugin


    【解决方案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')
            })
        ]
    };
    

    【讨论】:

    • 请尽量避免仅仅将代码作为答案,并尝试解释它的作用和原因。对于没有相关编码经验的人来说,您的代码可能并不明显。
    • 谢谢!你是一个救生员。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-09-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-10
    相关资源
    最近更新 更多