Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Design - MVP - Defaults - Emitted Assets #7

Open
TheLarkInn opened this issue Oct 13, 2016 · 0 comments
Open

Design - MVP - Defaults - Emitted Assets #7

TheLarkInn opened this issue Oct 13, 2016 · 0 comments

Comments

@TheLarkInn
Copy link
Contributor

TheLarkInn commented Oct 13, 2016 •
edited
Loading

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:

  1. the chunk for that entry
  2. vendors chunk
  3. inline chunk which represents the webpack bootstrap
  4. a shared chunk if applicable
  5. 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@TheLarkInn