I have different gits with different react applications. Where every application should use the same vendors chunk file with external packages (React, ReactDOM ...)
Projects setup:
Project 1 (git)
/dist/...
/src/...
webpack.config.js
Project 2 (git)
/dist/...
/src/...
webpack.config.js
Project N (git)
...
Every webpack.config.js contains this configuration but with different Library name:
module.exports = {
entry: {
app: './src/App.ts',
vendor: ['react', 'react-dom', 'react-redux', 'redux', 'redux-thunk']
},
output: {
path: path.resolve(__dirname, "dist"),
filename: '<Name>.bundle.js',
library: "<Name>",
libraryTarget: "umd"
},
module: { /* ... */ },
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.bundle.js'
})
]
}
Problem:
Webpack builds a vendor.bundle.js especially for the current library/project, not for global use, is there an option for webpack creating a vendor.bundle.js which can be included on a single page where both applications can be loaded based on this file:
Example:
<html>
<head>
<script src="/vendor.bundle.js"></script>
</head>
<body>
<script src="/app1.bundle.js"></script>
<script src="/app2.bundle.js"></script>
</body>
</html>