I'm building a multi-page application and am using webpack to bundle my client javascript.
I've got the following :
webpack.config.js
module.exports = {
entry: {
page1: [
'@babel/polyfill',
'whatwg-fetch',
'./src/scripts/page1.js'
],
page2: [
'@babel/polyfill',
'whatwg-fetch',
'./src/scripts/page2.js'
]
},
output: {
filename: './dist/scripts/[name].js'
},
module: {
rules: [
{
test: /\.js$/,
include: path.join(__dirname, 'src', 'scripts'),
use: {loader: 'babel-loader'}
}
]
}
plugins: [
new webpack.optimize.CommonsChunkPlugin({
filename: 'common'
})
]
}
page1.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- some code -->
<script src="/dist/common.js"></script>
<script src="/dist/page1.js"></script>
</body>
</html>
page1.js
import Typed from 'typed'//<- node_modules import
import myLib from './mylib.js'//<- local lib import
// some code
And page2.html and page2.js as so...
This is working perfectly fine
I would like to optimize the whole loading time, and opt for an async loading strategy of my scripts, but also keep my common code splitted to take as much as possible advantage of browser caching..
I would, idealy, like to configure CommonsChunkPlugin to be able to do this :
<!DOCTYPE html>
<html>
<head>
<!-- old plain synchronous load -->
<script src="/dist/minimalWebpackSorcellery.js"></script>
<!-- async load -->
<script async src="/dist/page1.js"></script>
</head>
<body>
<!-- some code -->
</body>
</html>
...having the plugin do the following :
- extract webpack code into one small file that I can require synchronously (that I'd add into a
<script>) - extract common code, bundled from webpack like
@babel/polyfillbut alsorequired modules liketypedfrom node_module or./myLib.jsfrom local (that I'd add into an async<script async>) - extract entry specific code (that asynchrously via
webPackJsonprequire the previous)
Is that possible in a simple motion ?
Am I correct that's the way I should do this ?
I've been playing with async, children and stuff, but I can't get it working