Use /static paths for assets (#278)

* Use /static paths for assets

* Fix e2e test

Author: gaearon

config/webpack.config.dev.js

@@ -16,7 +16,7 @@ var paths = require('./paths');
 module.exports = {
   devtool: 'eval',
   entry: [
-    require.resolve('webpack-dev-server/client'),
+    require.resolve('webpack-dev-server/client') + '?/',
     require.resolve('webpack/hot/dev-server'),
     require.resolve('./polyfills'),
     path.join(paths.appSrc, 'index')
@@ -25,7 +25,7 @@ module.exports = {
     // Next line is not used in dev but WebpackDevServer crashes without it:
     path: paths.appBuild,
     pathinfo: true,
-    filename: 'bundle.js',
+    filename: 'static/js/bundle.js',
     publicPath: '/'
   },
   resolve: {
@@ -75,11 +75,18 @@ module.exports = {
         test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)$/,
         include: [paths.appSrc, paths.appNodeModules],
         loader: 'file',
+        query: {
+          name: 'static/media/[name].[ext]'
+        }
       },
       {
         test: /\.(mp4|webm)$/,
         include: [paths.appSrc, paths.appNodeModules],
-        loader: 'url?limit=10000'
+        loader: 'url',
+        query: {
+          limit: 10000,
+          name: 'static/media/[name].[ext]'
+        }
       }
     ]
   },

config/webpack.config.prod.js

@@ -31,8 +31,8 @@ module.exports = {
   ],
   output: {
     path: paths.appBuild,
-    filename: '[name].[chunkhash:8].js',
-    chunkFilename: '[name].[chunkhash:8].chunk.js',
+    filename: 'static/js/[name].[chunkhash:8].js',
+    chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
     publicPath: publicPath
   },
   resolve: {
@@ -86,13 +86,17 @@ module.exports = {
         include: [paths.appSrc, paths.appNodeModules],
         loader: 'file',
         query: {
-          name: '[name].[hash:8].[ext]'
+          name: 'static/media/[name].[hash:8].[ext]'
         }
       },
       {
         test: /\.(mp4|webm)$/,
         include: [paths.appSrc, paths.appNodeModules],
-        loader: 'url?limit=10000'
+        loader: 'url',
+        query: {
+          limit: 10000,
+          name: 'static/media/[name].[hash:8].[ext]'
+        }
       }
     ]
   },
@@ -139,6 +143,6 @@ module.exports = {
         screw_ie8: true
       }
     }),
-    new ExtractTextPlugin('[name].[contenthash:8].css')
+    new ExtractTextPlugin('static/css/[name].[contenthash:8].css')
   ]
 };

scripts/build.js

@@ -40,16 +40,28 @@ webpack(config).run(function(err, stats) {
     .filter(asset => /\.(js|css)$/.test(asset.name))
     .map(asset => {
       var fileContents = fs.readFileSync(paths.appBuild + '/' + asset.name);
+      var size = gzipSize(fileContents);
       return {
-        name: asset.name,
-        size: gzipSize(fileContents)
+        folder: path.join('build', path.dirname(asset.name)),
+        name: path.basename(asset.name),
+        size: size,
+        sizeLabel: filesize(size)
       };
     });
   assets.sort((a, b) => b.size - a.size);
+
+  var longestSizeLabelLength = Math.max.apply(null,
+    assets.map(a => a.sizeLabel.length)
+  );
   assets.forEach(asset => {
+    var sizeLabel = asset.sizeLabel;
+    if (sizeLabel.length < longestSizeLabelLength) {
+      var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLabel.length);
+      sizeLabel += rightPadding;
+    }
     console.log(
-      '  ' + chalk.dim('build' + path.sep) + chalk.cyan(asset.name) + ': ' +
-      chalk.green(filesize(asset.size))
+      '  ' + chalk.green(sizeLabel) +
+      '  ' + chalk.dim(asset.folder + path.sep) + chalk.cyan(asset.name)
     );
   });
   console.log();

tasks/e2e.sh

@@ -61,7 +61,9 @@ npm run build
 
 # Check for expected output
 test -e build/*.html
-test -e build/*.js
+test -e build/static/js/*.js
+test -e build/static/css/*.css
+test -e build/static/media/*.svg
 
 # Pack CLI
 cd global-cli
@@ -84,7 +86,9 @@ npm run build
 
 # Check for expected output
 test -e build/*.html
-test -e build/*.js
+test -e build/static/js/*.js
+test -e build/static/css/*.css
+test -e build/static/media/*.svg
 
 # Test the server
 npm start -- --smoke-test
@@ -95,7 +99,9 @@ npm run build
 
 # Check for expected output
 test -e build/*.html
-test -e build/*.js
+test -e build/static/js/*.js
+test -e build/static/css/*.css
+test -e build/static/media/*.svg
 
 # Test the server
 npm start -- --smoke-test