Same modules in several apps
Two independent apps use the same helpers module. Let’s separate and bundle this file so that the browser only has to load and cache this file once.
CommonChunksPlugin
CommonChunksPlugin is the answer. Same workflow as the previous example:
- require webpack in webpack.config.js
- add
plugins:[] - add
new webpak.optimize.CommonsChunkPlugin - configure the plugin:
name: ‘common’, filename: ‘bundle.common.js’ - The above is enough for webpack to create the separate bundle
- again,
webpackJsonp is not defined error - add the created bundle file (bundle.common.js
) to both pages that reference it - Modify setup for the Karma test
- Don’t use this plugin for the test environment
- Conditionally load the plugin if
env.test is false - Use
undefined if in test environment - Filter out
undefined plugin from loading.filter(p => !!p)