Currently, I am utilizing DllPlugin in my development environment. However, once I introduce bootstrap into the build, it causes my vendor dll to break. Interestingly, if I comment out bootstrap, all other references work perfectly fine. Below is the relevant section from my configuration files.
Specifically 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]',
}),
],
Additionally, in the runtime config, I simply reference the link as follows:
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./assets/vendor-manifest.json'),
}),
The manifest output appears like this:
{"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":{}}}}
Finally, the error message generated reads:
..\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'm relatively new to working with DllPlugin, but the setup seems straightforward enough. Any guidance or insights would be greatly appreciated. Thank you.