Scenario (Defaults) ( #4 )
Fixture
webpack.config.js
const MultipageWebpackPlugin = require(multipage-webpack-plugin);
const config = {
entry: {
a: './src/a.js',
b: './src/b.js'
},
output: {
filename: '[name].chunk.js',
path: path.join(__dirname, "dist")
},
module: {
/* ... */
},
plugins: [
new MultipageWebpackPlugin()
]
};
module.exports = config;Emitted Assets
Should there be any consideration for css chunks? Or should this happen automagically?
Per #5 since no arguments are being passed in for template type or extension, then the default output template will be a .html file that is generated from html-webpack-plugin. html-webpack-plugin will automatically emit any init chunk assets (which css [unless lazy loaded] will be included). tl;dr this should happen automagically.
If css chunks belong to a template, should it be added into a "head" tag? Or should it be manually prescribed to a specific location. html-webpack-plugin for its default output template will place css chunks into the <head></head> tag.
Should there be a default vendor chunk? Should it be determined by minChunks: module => module.resource.test(/node_modules/) By default?
- Users should not have to specify which libraries they are using from their node modules to have separated into a different bundle.
- Essentially, they should not have to even have the entry point and then vendor chunking automatically happens. (This would be overridden if a vendorChunkName is specified).
- If there is already an entry point called vendor we should emit a warning saying that if they would not like the default vendor chunking strategy that they specify a "vendorChunkName" option in the options object.
What is the default vendor chunk name?
The most common design pattern is 'vendor'. I think we'll use this one.
Should we employ code sharing (CommonsChunkPlugin) across entry points?
I think by default there is great benefit in sharing code across entry points. The minChunks amount being ~3.
What is the default shared chunk name?
"shared", however if there already exists a chunk name that is called "shared", that we emit a warning from the plugin that says "shared" is creating an automatic shared chunk across entry points and if they would like to use their strategy to specify a "sharedChunkName".
Should these be called '[name].chunk.js'?
Yes, for develop. Production would probably include [chunkhash].chunk.js
Which files should be included in each template?
One single entrypoint will include the following:
- the chunk for that entry
- vendors chunk
- inline chunk which represents the webpack bootstrap
- a shared chunk if applicable
- css chunks if extract-text-plugin is being used
Where should emitted assets go? (Respect output property?/Combination)
By default the emitted assets (non-template) should respect the existing output.path property and live in the root of that directory.
Order of scripts inside template should just work every time regardless of the case
Yes, html-webpack-plugin should handle this, and to align with the rest of the purpose of this plugin, it shouldn't be a concern of the user.
Example derived from fixture above:
├── dist/
│ ├── a/
│ ├─── index.html
│ ├── b/
│ ├─── index.html
│ ├── a.js
│ ├── b.js
│ ├── shared.js
│ ├── inline.js
│ ├── vendors.js
│ ├── a.css (if applicable)
** a/index.html **
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="../../inline.chunk.js"></script>
<script type="text/javascript" src="../../shared.bundle.js"></script>
<script type="text/javascript" src="../../vendor.chunk.js"></script>
<script type="text/javascript" src="../../a.chunk.js"></script>
</body>
</html>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent