What is the difference between multi-compiler and multiple-entry-points in webpack?

Viewed 566

guys!! I'm trying to learn webpack and optimize my webpack project(a mutil-page project) configuration, but I got confused in some problems.hope someone can help me.

By the way,please forgive me for not having a good English, but I think Google Translate should basically be able to let me explain my problem. If there is something unclear in the description, please point it out and I will modify it.

Related Links

https://github.com/webpack/webpack/blob/main/examples/multiple-entry-points/webpack.config.js

https://github.com/webpack/webpack/blob/main/examples/multi-compiler/webpack.config.js

Q1.What are the advantages and disadvantages of each in mutil-html page config?

maybe multi-compiler have more flexible configuration but speed slower?

Q2.If I use the configuration of mutil-entry-point, how can I get the current entry name in the plugin or loader?

I know that the author of webpack said that this can't be done on the loader, https://github.com/webpack/webpack/issues/6124#issuecomment-351647892

but how about in plugin?

Q3.Is there any way to get the entire dependency graph from the entry?

like webpack-bundle-analyzer?

1 Answers

The MultiCompiler allows you to create different rulesets and use different plugins for different files where the multi-target just allows you to compile multiple files and outputs. As for your questions:

  1. Basically yes, multi-compiler does not run in parallel and needs to load the configuration, plugins and rulesets for each compilation. So it is more flexible, but runs slower, there are however alternatives to run it in parallel like parallel-webpack

  2. You can create a custom plugin for your webpack and use their compiler-hooks to get what you want, more specifically I would check out the asset-emitted hook, that looks as follows:

     compiler.hooks.assetEmitted.tap(
       'MyPlugin',
       (file, { content, source, outputPath, compilation, targetPath }) => {
         console.log(content); // <Buffer 66 6f 6f 62 61 72>
       }
     );
    

    If you wish to create your own plugin, this guide of theirs is essential: webpack writing-a-plugin

  3. The best I can come up with is this from webpack-bundle-analyzer npm package :

When opened, the report displays all of the Webpack chunks for your project. It's possible to filter to a more specific list of chunks by using the sidebar or the chunk context menu. Sidebar The Sidebar Menu can be opened by clicking the > button at the top left of the report. You can select or deselect chunks to display under the "Show chunks" heading there. Chunk Context Menu The Chunk Context Menu can be opened by right-clicking or Ctrl-clicking on a specific chunk in the report. It provides the following options: Hide chunk: Hides the selected chunk Hide all other chunks: Hides all chunks besides the selected one Show all chunks: Un-hides any hidden chunks, returning the report to its initial, unfiltered view

They clarify it in their documentation:

MultiCompiler:

The MultiCompiler module allows webpack to run multiple configurations in separate compilers. If the options parameter in the webpack's NodeJS api is an array of options, webpack applies separate compilers and calls the callback after all compilers have been executed.

var webpack = require('webpack');

webpack([
  { entry: './index1.js', output: { filename: 'bundle1.js' }, ruleset1, pluginsA},
  { entry: './index2.js', output: { filename: 'bundle2.js' }, ruleset2, pluginsB }
], (err, stats) => { // [Stats Object](#stats-object)
  process.stdout.write(stats.toString() + '\n');
})

Multiple-entrypoints

If your configuration creates more than a single "chunk" (as with multiple entry points or when using plugins like CommonsChunkPlugin), you should use substitutions to ensure that each file has a unique name.

module.exports = {
  entry: {
    app: './src/app.js', // Will export to app.js
    search: './src/search.js', // Will export to search.js
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist',
  },
};

Also, check out webpack-code splitting

Related