webpack-bundle-analyzer 3.1.0 → 3.3.2

package/src/analyzer.js

@@ -9,7 +9,8 @@ const Folder = require('./tree/Folder').default;
 const {parseBundle} = require('./parseUtils');
 const {createAssetsFilter} = require('./utils');
 
-const FILENAME_QUERY_REGEXP = /\?.*$/;
+const FILENAME_QUERY_REGEXP = /\?.*$/u;
+const FILENAME_EXTENSIONS = /\.(js|mjs)$/iu;
 
 module.exports = {
   getViewerData,
@@ -29,13 +30,13 @@ function getViewerData(bundleStats, bundleDir, opts) {
     bundleStats = bundleStats.children[0];
   }
 
-  // Picking only `*.js` assets from bundle that has non-empty `chunks` array
+  // Picking only `*.js or *.mjs` assets from bundle that has non-empty `chunks` array
   bundleStats.assets = _.filter(bundleStats.assets, asset => {
     // Removing query part from filename (yes, somebody uses it for some reason and Webpack supports it)
     // See #22
     asset.name = asset.name.replace(FILENAME_QUERY_REGEXP, '');
 
-    return _.endsWith(asset.name, '.js') && !_.isEmpty(asset.chunks) && isAssetIncluded(asset.name);
+    return FILENAME_EXTENSIONS.test(asset.name) && !_.isEmpty(asset.chunks) && isAssetIncluded(asset.name);
   });
 
   // Trying to parse bundle assets and get real module sizes if `bundleDir` is provided
@@ -93,6 +94,7 @@ function getViewerData(bundleStats, bundleDir, opts) {
   return _.transform(assets, (result, asset, filename) => {
     result.push({
       label: filename,
+      isAsset: true,
       // Not using `asset.size` here provided by Webpack because it can be very confusing when `UglifyJsPlugin` is used.
       // In this case all module sizes from stats file will represent unminified module sizes, but `asset.size` will
       // be the size of minified bundle.

package/src/bin/analyzer.js

@@ -32,7 +32,9 @@ const program = commander
     'server'
   )
   .option(
-    '-h, --host <host>',
+    // Had to make `host` parameter optional in order to let `-h` flag output help message
+    // Fixes https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/239
+    '-h, --host [host]',
     'Host that will be used in `server` mode to start HTTP server.',
     '127.0.0.1'
   )
@@ -125,7 +127,7 @@ if (mode === 'server') {
 }
 
 function showHelp(error) {
-  if (error) console.log(`\n  ${magenta(error)}`);
+  if (error) console.log(`\n  ${magenta(error)}\n`);
   program.outputHelp();
   process.exit(1);
 }

package/src/tree/utils.js

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 
-const MULTI_MODULE_REGEXP = /^multi /;
+const MULTI_MODULE_REGEXP = /^multi /u;
 
 export function getModulePathParts(moduleData) {
   if (MULTI_MODULE_REGEXP.test(moduleData.identifier)) {

package/src/utils.js

@@ -9,7 +9,7 @@ function createAssetsFilter(excludePatterns) {
     .compact()
     .map(pattern => {
       if (typeof pattern === 'string') {
-        pattern = new RegExp(pattern);
+        pattern = new RegExp(pattern, 'u');
       }
 
       if (_.isRegExp(pattern)) {

package/src/viewer.js

@@ -14,6 +14,7 @@ const Logger = require('./Logger');
 const analyzer = require('./analyzer');
 
 const projectRoot = path.resolve(__dirname, '..');
+const assetsRoot = path.join(projectRoot, 'public');
 
 module.exports = {
   startServer,
@@ -51,9 +52,11 @@ async function startServer(bundleStats, opts) {
   app.use('/', (req, res) => {
     res.render('viewer', {
       mode: 'server',
-      get chartData() { return JSON.stringify(chartData) },
-      defaultSizes: JSON.stringify(defaultSizes),
-      enableWebSocket: true
+      get chartData() { return chartData },
+      defaultSizes,
+      enableWebSocket: true,
+      // Helpers
+      escapeJson
     });
   });
 
@@ -130,10 +133,12 @@ async function generateReport(bundleStats, opts) {
       `${projectRoot}/views/viewer.ejs`,
       {
         mode: 'static',
-        chartData: JSON.stringify(chartData),
+        chartData,
+        defaultSizes,
+        enableWebSocket: false,
+        // Helpers
         assetContent: getAssetContent,
-        defaultSizes: JSON.stringify(defaultSizes),
-        enableWebSocket: false
+        escapeJson
       },
       (err, reportHtml) => {
         try {
@@ -165,7 +170,20 @@ async function generateReport(bundleStats, opts) {
 }
 
 function getAssetContent(filename) {
-  return fs.readFileSync(`${projectRoot}/public/${filename}`, 'utf8');
+  const assetPath = path.join(assetsRoot, filename);
+
+  if (!assetPath.startsWith(assetsRoot)) {
+    throw new Error(`"${filename}" is outside of the assets root`);
+  }
+
+  return fs.readFileSync(assetPath, 'utf8');
+}
+
+/**
+ * Escapes `<` characters in JSON to safely use it in `<script>` tag.
+ */
+function escapeJson(json) {
+  return JSON.stringify(json).replace(/</gu, '\\u003c');
 }
 
 function getChartData(analyzerOpts, ...args) {

package/views/script.ejs

@@ -4,5 +4,5 @@
     <%- assetContent(filename) %>
   </script>
 <% } else { %>
-  <script src="/<%= filename %>"></script>
+  <script src="<%= filename %>"></script>
 <% } %>

package/views/viewer.ejs

@@ -11,9 +11,9 @@
   <body>
     <div id="app"></div>
     <script>
-      window.chartData = <%- chartData %>;
-      window.defaultSizes = <%- defaultSizes %>;
-      window.enableWebSocket = <%- enableWebSocket %>;
+      window.chartData = <%- escapeJson(chartData) %>;
+      window.defaultSizes = <%- escapeJson(defaultSizes) %>;
+      window.enableWebSocket = <%- escapeJson(enableWebSocket) %>;
     </script>
   </body>
 </html>