Skip to content

Commit 6996274

Browse files
committed
fix(webpack.config.template.js): change webpack config to fix bundle duplication issue
Updating the webpack config to use optimization.splitChunks rather than entry.vendor resolves an issue that appears when jQuery or Bootstrap is added. When attempting to use jQuery or the jQuery Bootstrap extensions in code, webpack is duplicating jQuery across the app end vendor bundles. Using optimization.splitChunks allows webpack to workout the dependencies and also reduces the size of the generated bundles by splitting them up. fixes this issue: #958
1 parent 2d8c015 commit 6996274

File tree

1 file changed

+53
-2
lines changed

1 file changed

+53
-2
lines changed

lib/resources/content/webpack.config.template.js

Lines changed: 53 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,7 @@ module.exports = ({production, server, extractCss, coverage, analyze, karma} = {
4444
alias: { 'aurelia-binding': path.resolve(__dirname, 'node_modules/aurelia-binding') }
4545
},
4646
entry: {
47-
app: ['aurelia-bootstrapper'],
48-
vendor: ['bluebird'],
47+
app: ['aurelia-bootstrapper']
4948
},
5049
mode: production ? 'production' : 'development',
5150
output: {
@@ -55,6 +54,58 @@ module.exports = ({production, server, extractCss, coverage, analyze, karma} = {
5554
sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map',
5655
chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[hash].chunk.js'
5756
},
57+
optimization: {
58+
// Use splitChunks to breakdown the vendor bundle into smaller files
59+
// https://webpack.js.org/plugins/split-chunks-plugin/
60+
splitChunks: {
61+
chunks: "initial",
62+
cacheGroups: {
63+
default: false, // Disable the built-in groups (default and vendors)
64+
vendors: false,
65+
bluebird: {
66+
test: /[\\/]node_modules[\\/]bluebird[\\/]/,
67+
name: "vendor.bluebird",
68+
enforce: true,
69+
priority: 100
70+
},
71+
// You can insert additional entries here for jQuery and bootstrap etc. if you need them
72+
// Break the Aurelia bundle down into smaller chunks, binding and templating are the largest
73+
aureliaBinding: {
74+
test: /[\\/]node_modules[\\/]aurelia-binding[\\/]/,
75+
name: "vendor.aurelia-binding",
76+
enforce: true,
77+
priority: 28
78+
},
79+
aureliaTemplating: {
80+
test: /[\\/]node_modules[\\/]aurelia-templating[\\/]/,
81+
name: "vendor.aurelia-templating",
82+
enforce: true,
83+
priority: 26
84+
},
85+
aurelia: {
86+
test: /[\\/]node_modules[\\/]aurelia-.*[\\/]/,
87+
name: "vendor.aurelia",
88+
enforce: true,
89+
priority: 20
90+
},
91+
// This picks up everything else being used from node_modules
92+
vendors: {
93+
test: /[\\/]node_modules[\\/]/,
94+
name: "vendor",
95+
enforce: true,
96+
priority: 10
97+
},
98+
common: { // common chunk
99+
name: 'common',
100+
minChunks: 2, // Creates a new chunk if a module is shared between different chunks more than twice
101+
chunks: 'async',
102+
priority: 0,
103+
reuseExistingChunk: true,
104+
enforce: true
105+
}
106+
}
107+
}
108+
},
58109
performance: { hints: false },
59110
devServer: {
60111
contentBase: outDir,

0 commit comments

Comments
 (0)