Merge pull request #158 from webpack-contrib/concatenated-modules-con…

…tent

Show contents of concatenated modules (Webpack 4)

.eslintignore

@@ -1,3 +1,6 @@
+# Node modules
+node_modules
+
 # Generated code
 lib
 public
@@ -7,6 +10,7 @@ client/vendor
 
 # Test fixtures
 test/bundles
+test/stats
 test/webpack.config.js
 
 # Test results

client/components/ModulesTreemap.jsx

@@ -155,8 +155,8 @@ export default class ModulesTreemap extends Component {
         <div><strong>{module.label}</strong></div>
         <br/>
         {this.renderModuleSize(module, 'stat')}
-        {this.renderModuleSize(module, 'parsed')}
-        {this.renderModuleSize(module, 'gzip')}
+        {!module.inaccurateSizes && this.renderModuleSize(module, 'parsed')}
+        {!module.inaccurateSizes && this.renderModuleSize(module, 'gzip')}
         {module.path &&
           <div>Path: <strong>{module.path}</strong></div>
         }

src/Logger.js

@@ -1,20 +1,23 @@
 const LEVELS = [
+  'debug',
   'info',
   'warn',
   'error',
   'silent'
 ];
 
 const LEVEL_TO_CONSOLE_METHOD = new Map([
+  ['debug', 'log'],
   ['info', 'log'],
   ['warn', 'log']
 ]);
 
 class Logger {
 
   static levels = LEVELS;
+  static defaultLevel = 'info';
 
-  constructor(level = 'info') {
+  constructor(level = Logger.defaultLevel) {
     this.activeLevels = new Set();
     this.setLogLevel(level);
   }

src/analyzer.js

@@ -5,11 +5,10 @@ const _ = require('lodash');
 const gzipSize = require('gzip-size');
 
 const Logger = require('./Logger');
-const { Folder } = require('../lib/tree');
-const { parseBundle } = require('../lib/parseUtils');
+const Folder = require('./tree/Folder').default;
+const { parseBundle } = require('./parseUtils');
 
 const FILENAME_QUERY_REGEXP = /\?.*$/;
-const MULTI_MODULE_REGEXP = /^multi /;
 
 module.exports = {
   getViewerData,
@@ -117,31 +116,7 @@ function assetHasModule(statAsset, statModule) {
 function createModulesTree(modules) {
   const root = new Folder('.');
 
-  _.each(modules, module => {
-    const path = getModulePath(module);
-
-    if (path) {
-      root.addModuleByPath(path, module);
-    }
-  });
+  _.each(modules, module => root.addModule(module));
 
   return root;
 }
-
-function getModulePath(module) {
-  if (MULTI_MODULE_REGEXP.test(module.identifier)) {
-    return [module.identifier];
-  }
-
-  const parsedPath = _
-    // Removing loaders from module path: they're joined by `!` and the last part is a raw module path
-    .last(module.name.split('!'))
-    // Splitting module path into parts
-    .split('/')
-    // Removing first `.`
-    .slice(1)
-    // Replacing `~` with `node_modules`
-    .map(part => (part === '~' ? 'node_modules' : part));
-
-  return parsedPath.length ? parsedPath : null;
-}

src/bin/analyzer.js

@@ -8,6 +8,7 @@ const { magenta } = require('chalk');
 
 const analyzer = require('../analyzer');
 const viewer = require('../viewer');
+const Logger = require('../Logger');
 
 const SIZES = new Set(['stat', 'parsed', 'gzip']);
 
@@ -27,40 +28,41 @@ const program = commander
     '-m, --mode <mode>',
     'Analyzer mode. Should be `server` or `static`.' +
     br('In `server` mode analyzer will start HTTP server to show bundle report.') +
-    br('In `static` mode single HTML file with bundle report will be generated.') +
-    br('Default is `server`.'),
+    br('In `static` mode single HTML file with bundle report will be generated.'),
     'server'
   )
   .option(
     '-h, --host <host>',
-    'Host that will be used in `server` mode to start HTTP server.' +
-    br('Default is `127.0.0.1`.'),
+    'Host that will be used in `server` mode to start HTTP server.',
     '127.0.0.1'
   )
   .option(
     '-p, --port <n>',
-    'Port that will be used in `server` mode to start HTTP server.' +
-    br('Default is 8888.'),
+    'Port that will be used in `server` mode to start HTTP server.',
     Number,
     8888
   )
   .option(
     '-r, --report <file>',
-    'Path to bundle report file that will be generated in `static` mode.' +
-    br('Default is `report.html`.'),
+    'Path to bundle report file that will be generated in `static` mode.',
     'report.html'
   )
   .option(
     '-s, --default-sizes <type>',
     'Module sizes to show in treemap by default.' +
-    br(`Possible values: ${[...SIZES].join(', ')}`) +
-    br('Default is `parsed`.'),
+    br(`Possible values: ${[...SIZES].join(', ')}`),
     'parsed'
   )
   .option(
     '-O, --no-open',
     "Don't open report in default browser automatically."
   )
+  .option(
+    '-l, --log-level <level>',
+    'Log level.' +
+    br(`Possible values: ${[...Logger.levels].join(', ')}`),
+    Logger.defaultLevel
+  )
   .parse(process.argv);
 
 let {
@@ -69,9 +71,11 @@ let {
   port,
   report: reportFilename,
   defaultSizes,
+  logLevel,
   open: openBrowser,
   args: [bundleStatsFile, bundleDir]
 } = program;
+const logger = new Logger(logLevel);
 
 if (!bundleStatsFile) showHelp('Provide path to Webpack Stats file as first argument');
 if (mode !== 'server' && mode !== 'static') showHelp('Invalid mode. Should be either `server` or `static`.');
@@ -87,7 +91,8 @@ let bundleStats;
 try {
   bundleStats = analyzer.readStatsFromFile(bundleStatsFile);
 } catch (err) {
-  console.error(`Could't read webpack bundle stats from "${bundleStatsFile}":\n${err}`);
+  logger.error(`Could't read webpack bundle stats from "${bundleStatsFile}":\n${err}`);
+  logger.debug(err.stack);
   process.exit(1);
 }
 
@@ -97,14 +102,16 @@ if (mode === 'server') {
     port,
     host,
     defaultSizes,
-    bundleDir
+    bundleDir,
+    logger: new Logger(logLevel)
   });
 } else {
   viewer.generateReport(bundleStats, {
     openBrowser,
     reportFilename: resolve(reportFilename),
     defaultSizes,
-    bundleDir
+    bundleDir,
+    logger: new Logger(logLevel)
   });
 }