Permalink
Browse files

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
  • Loading branch information...
chrisckc committed Nov 7, 2018
1 parent 2d8c015 commit 6996274041c3faf2e7d8eeadb000d8c19607f869
Showing with 53 additions and 2 deletions.
  1. +53 −2 lib/resources/content/webpack.config.template.js
@@ -44,8 +44,7 @@ module.exports = ({production, server, extractCss, coverage, analyze, karma} = {
alias: { 'aurelia-binding': path.resolve(__dirname, 'node_modules/aurelia-binding') }
},
entry: {
app: ['aurelia-bootstrapper'],
vendor: ['bluebird'],
app: ['aurelia-bootstrapper']
},
mode: production ? 'production' : 'development',
output: {
@@ -55,6 +54,58 @@ module.exports = ({production, server, extractCss, coverage, analyze, karma} = {
sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map',
chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[hash].chunk.js'
},
optimization: {
// Use splitChunks to breakdown the vendor bundle into smaller files
// https://webpack.js.org/plugins/split-chunks-plugin/
splitChunks: {
chunks: "initial",
cacheGroups: {
default: false, // Disable the built-in groups (default and vendors)
vendors: false,
bluebird: {
test: /[\\/]node_modules[\\/]bluebird[\\/]/,
name: "vendor.bluebird",
enforce: true,
priority: 100
},
// You can insert additional entries here for jQuery and bootstrap etc. if you need them
// Break the Aurelia bundle down into smaller chunks, binding and templating are the largest
aureliaBinding: {
test: /[\\/]node_modules[\\/]aurelia-binding[\\/]/,
name: "vendor.aurelia-binding",
enforce: true,
priority: 28
},
aureliaTemplating: {
test: /[\\/]node_modules[\\/]aurelia-templating[\\/]/,
name: "vendor.aurelia-templating",
enforce: true,
priority: 26
},
aurelia: {
test: /[\\/]node_modules[\\/]aurelia-.*[\\/]/,
name: "vendor.aurelia",
enforce: true,
priority: 20
},
// This picks up everything else being used from node_modules
vendors: {
test: /[\\/]node_modules[\\/]/,
name: "vendor",
enforce: true,
priority: 10
},
common: { // common chunk
name: 'common',
minChunks: 2, // Creates a new chunk if a module is shared between different chunks more than twice
chunks: 'async',
priority: 0,
reuseExistingChunk: true,
enforce: true
}
}
}
},
performance: { hints: false },
devServer: {
contentBase: outDir,

0 comments on commit 6996274

Please sign in to comment.