3

In the webpack examples, in particular

We can create a bundle that depends on already pre-bundled libraries. The examples at hand work as they should. That is, we first navigate to examples/dll and run node build.js to create the libraries. Then we navigate to examples/dll-user and run node build.js to create our final bundles that reference the previously bundled libraries.

My question is the following. Suppose that in examples/dll we modify the configuration file to look as follows:

var path = require("path");
var webpack = require("../../");
module.exports = {
    entry: {
        alpha: ["./alpha", "./a", "module"],
        beta: ["./beta", "./b", "module"]
    },
    output: {
        path: path.join(__dirname, "js"),
        filename: "MyDll.[name].js",
        library: "[name]_[hash]"
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.join(__dirname, "js", "[name]-manifest.json"),
            name: "[name]_[hash]"
        })
    ]
};

That is, we added module to the beta dll. Now we have to dlls that have module. Lets compile the dlls and move on to dll-user example. Here what we would like to do is make a bundle from which we can choose the library that will provide module. Lets try adding one more line to the example

console.log(require("../dll/alpha"));
console.log(require("../dll/a"));

console.log(require("beta/beta"));
console.log(require("beta/b"));

console.log(require("module"));
console.log(require("beta/module"));

In this case I want to be able to use the module that resides in the beta dll. Unfortunately I was not lucky. This is the output I obtain after trying it:

jmlopez in ~/Downloads/webpack-master/examples/dll-user$ node build.js 
{ [Error: Command failed: /bin/sh -c node ../../bin/webpack.js --display-reasons --display-chunks --display-modules --display-origins --output-public-path "js/" -p  ./example.js js/output.js
]
  killed: false,
  code: 2,
  signal: null,
  cmd: '/bin/sh -c node ../../bin/webpack.js --display-reasons --display-chunks --display-modules --display-origins --output-public-path "js/" -p  ./example.js js/output.js' }
Hash: bd42dda7e56ebfd7cd32
Version: webpack 2.1.0-beta.6
Time: 68ms
    Asset     Size  Chunks             Chunk Names
output.js  4.26 kB       0  [emitted]  main
chunk    {0} output.js (main) 504 bytes [rendered]
    > main [7] ./example.js 
    [7] ./example.js 210 bytes {0} [built] [1 error]
     + 7 hidden modules

ERROR in ./example.js
Module not found: Error: Can't resolve 'beta/module' in '/Users/jmlopez/Downloads/webpack-master/examples/dll-user'
 @ ./example.js 8:12-34

{ [Error: Command failed: /bin/sh -c node ../../bin/webpack.js --display-reasons --display-chunks --display-modules --display-origins --output-public-path "js/" --output-pathinfo  ./example.js js/output.js
]
  killed: false,
  code: 2,
  signal: null,
  cmd: '/bin/sh -c node ../../bin/webpack.js --display-reasons --display-chunks --display-modules --display-origins --output-public-path "js/" --output-pathinfo  ./example.js js/output.js' }

Is there any way to specify the library that the bundle should use? I thought the scope option in DllReferencePlugin would do the trick but it doesn't seem to be the case.

EDIT: Note that adding ./a to the beta dll and then using require('beta/a') in the example works. It seems that webpack has a hard time figuring it out the node_modules.

Ken Redler
  • 23,863
  • 8
  • 57
  • 69
jmlopez
  • 4,853
  • 4
  • 40
  • 74

1 Answers1

1

I had a similar issue when creating my DLL using a module from NPM. The fix for me was to to reference the full path from the manifest, not just the module name.

index.js - module using the DLL

var angular = require('alpha/node_modules/angular-wrapper/lib/index'); require('alpha/node_modules/angular-ui-router/release/angular-ui-router');

Makes the require in the project you are using the DLL look a bit ugly but it works.

webpack.conf - module using the DLL

new webpack.DllReferencePlugin({ scope: 'alpha', context: path.join(__dirname,'./node_modules/@company/ng1dll/dist/'), manifest: require('./node_modules/@company/ng1dll/dist/angular-manifest.json') })

Note: I am loading my module via a private NPM package.

webpack.conf - DLL creation 

module.exports = {
    entry: {
        beta: ["./beta", "./b"],
        angular: ['angular-wrapper','angular-ui-router']
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].js",
        library: "[name]_lib"

    },
    plugins: [
        new webpack.DllPlugin({
            path: path.join(__dirname, "dist", "[name]-manifest.json"),
            name: "[name]_lib"
        })
    ]
}

manifest.json

{
  "name": "angular_lib",
  "content": {
    "./node_modules/angular-wrapper/lib/index.js": 1,
    "./node_modules/angular-wrapper/node_modules/angular/index.js": 2,
    "./node_modules/angular-wrapper/node_modules/angular/angular.js": 3,
    "./node_modules/angular-ui-router/release/angular-ui-router.js": 4
  }
}
Cameron
  • 826
  • 10
  • 10