Using webpack DllPlugin with bootstrap 4 beta causes Uncaught ReferenceError

Question

I am using DllPlugin for my dev environment, however when I add bootstrap to the build my vendor dll breaks. If I comment out bootstrap all other references are working. Here is the relevant part of my config files.

For the vendor build

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

And in the runtime config I just reference link so

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

The manifest output is

{"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":{}}}}

and finally the error is

..\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)

I am new to the DllPlugin, but the setup looks simple enough. Thanks.

Answer 1

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