在bootstrap 4 beta版中使用webpack DllPlugin导致无法捕获ReferenceError

Question

我在我的开发环境中使用DllPlugin，但是当我将bootstrap添加到构建时，我的供应商dll中断了。如果我注释掉bootstrap，所有其他的引用都可以工作。下面是我的配置文件的相关部分。

对于供应商构建

    entry: {
        vendor: [
            'bootstrap',
            'event-source-polyfill',
            'font-awesome/css/font-awesome.css',
            'ionicons/dist/css/ionicons.css',
            'isomorphic-fetch',
            'jquery',
        ],
    },            
    output: {
        path: path.join(__dirname, 'assets'),                
        filename: '[name].js',
        library: '[name]_[hash]',
    },
    plugins: [
        new CleanWebpackPlugin('assets'),
        extractCss,
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Popper: ['popper.js', 'default'],
        }),
        new webpack.DllPlugin({
            path: path.join(__dirname, 'assets', '[name]-manifest.json'),
            name: '[name]_[hash]',
        }),
    ],

在运行时配置中，我只引用了链接

    new webpack.DllReferencePlugin({
        context: __dirname,
        manifest: require('./assets/vendor-manifest.json'),
    }),

清单输出为

{"name":"vendor_c0cb30d4f33754762565","content":{"./node_modules/event-source-polyfill/src/eventsource.js":{"id":5,"meta":{}},"./node_modules/font-awesome/css/font-awesome.css":{"id":6,"meta":{}},"./node_modules/ionicons/dist/css/ionicons.css":{"id":7,"meta":{}},"./node_modules/isomorphic-fetch/fetch-npm-browserify.js":{"id":8,"meta":{}},"./node_modules/jquery/dist/jquery.js":{"id":0,"meta":{}},"./node_modules/whatwg-fetch/fetch.js":{"id":9,"meta":{}},"./node_modules/bootstrap/dist/js/bootstrap.js":{"id":2,"meta":{}},"./node_modules/popper.js/dist/esm/popper.js":{"id":3,"meta":{"harmonyModule":true},"exports":["default"]},"./node_modules/webpack/buildin/global.js":{"id":4,"meta":{}}}}

最后，错误是

..\external "vendor_c0cb30d4f33754762565":1 Uncaught ReferenceError: vendor_c0cb30d4f33754762565 is not defined
    at Object.dll-reference vendor_c0cb30d4f33754762565 (..\external "vendor_c0cb30d4f33754762565":1)
    at __webpack_require__ (bootstrap ab071247d46d1a97c83e:678)
    at fn (bootstrap ab071247d46d1a97c83e:88)
    at Object../node_modules/webpack/buildin/global.js (global.js from dll-reference vendor_c0cb30d4f33754762565:1)
    at __webpack_require__ (bootstrap ab071247d46d1a97c83e:678)
    at fn (bootstrap ab071247d46d1a97c83e:88)
    at Object../node_modules/punycode/punycode.js (punycode.js:533)
    at __webpack_require__ (bootstrap ab071247d46d1a97c83e:678)
    at fn (bootstrap ab071247d46d1a97c83e:88)
    at Object../node_modules/url/url.js (url.js:24)

我是DllPlugin的新手，但是设置看起来很简单。谢谢。

Answer 1

在DLL捆绑配置中设置ouput.library选项