webpack - 通过范围模式选择 webpack dll 包

Question

在 webpack 示例中，特别是

• https://github.com/webpack/webpack/tree/master/examples/dll
• https://github.com/webpack/webpack/tree/master/examples/dll-user

我们可以创建一个依赖于已经预先捆绑的库的 bundle 。手头的示例可以正常工作。也就是我们先导航到 examples/dll 并运行 node build.js 来创建库。然后我们导航到 examples/dll-user 并运行 node build.js 以创建引用先前捆绑库的最终 bundle 。

我的问题如下。假设在 examples/dll 中，我们将配置文件修改为如下所示:

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

也就是说，我们在beta dll中添加了module。现在我们必须有 module 的 dll。让我们编译 dll 并转到 dll-user 示例。这里我们要做的是制作一个包，我们可以从中选择将提供 module 的库。让我们尝试在示例中再添加一行

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"));

在这种情况下，我希望能够使用驻留在 beta dll 中的 module。不幸的是我并不幸运。这是我尝试后得到的输出:

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' }

有什么方法可以指定包应该使用的库吗？我认为 DllReferencePlugin 中的 scope 选项可以解决问题，但事实并非如此。

编辑:请注意，将 ./a 添加到 beta dll，然后在示例中使用 require('beta/a')作品。看来 webpack 很难弄清楚 node_modules。

Answer 1

我在使用来自 NPM 的模块创建我的 DLL 时遇到了类似的问题。我的解决方法是引用 list 中的完整路径，而不仅仅是模块名称。

index.js - 使用 DLL 的模块

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


使您正在使用 DLL 的项目中的 require 看起来有点难看，但它可以工作。

webpack.conf - 使用 DLL 的模块

新的 webpack.DllReferencePlugin({
范围:'阿尔法'，
上下文:path.join(__dirname,'./node_modules/@company/ng1dll/dist/'),
list :要求('./node_modules/@company/ng1dll/dist/angular-manifest.json')
})

注意:我正在通过私有(private) NPM 包加载我的模块。

webpack.conf - DLL 创建

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"
        })
    ]
}

list .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
  }
}