diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js index 949e9465fc..50f1ef063b 100644 --- a/config/webpack.config.dev.js +++ b/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]' + } } ] }, diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js index 1045d485d5..010f47fd1b 100644 --- a/config/webpack.config.prod.js +++ b/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') ] }; diff --git a/scripts/build.js b/scripts/build.js index 49231ffea7..eadfd93a10 100644 --- a/scripts/build.js +++ b/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(); diff --git a/tasks/e2e.sh b/tasks/e2e.sh index 198de1d206..af9d5907d3 100755 --- a/tasks/e2e.sh +++ b/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