Design - MVP - Defaults - Emitted Assets

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>

zorigitano / multipage-webpack-plugin