simplify build process and add support for tree shaking

Author: marcosmoura

.babelrc

@@ -1,19 +1,17 @@
 {
   "presets": [
-    "es2015",
-    "es2017",
-    "stage-0",
     [
       "env",
       {
+        "modules": false,
         "targets": {
           "browsers": ["last 3 versions", "not IE < 10"]
         }
       }
     ]
   ],
   "plugins": [
-    "transform-runtime",
-    "add-module-exports"
+    "add-module-exports",
+    "transform-object-rest-spread"
   ]
 }

build/server/build-docs.js

@@ -1,5 +1,27 @@
+import ora from 'ora';
+import chalk from 'chalk';
 import webpack from 'webpack';
-import build from './build';
 import webpackConfig from '../webpack/prod-docs';
 
-webpack(webpackConfig, build);
+const spinner = ora(chalk.cyan('Building website'));
+
+process.stdout.write('\n');
+spinner.start();
+
+webpack(webpackConfig, (error, stats) => {
+  if (error) {
+    spinner.fail(chalk.red('Something wrong happened:\n'));
+
+    throw error;
+  }
+
+  process.stdout.write('\n\n' + stats.toString({
+    colors: true,
+    modules: false,
+    children: false,
+    chunks: false,
+    chunkModules: false
+  }) + '\n\n');
+
+  spinner.succeed(chalk.green('Documentation builded with success!\n'));
+});

build/server/build-lib.js

@@ -1,6 +1,28 @@
+import ora from 'ora';
+import chalk from 'chalk';
 import webpack from 'webpack';
-import build from './build';
 import webpackConfig from '../webpack/prod-lib';
 import webpackDebugConfig from '../webpack/debug-lib';
 
-webpack([webpackConfig, webpackDebugConfig], build);
+const spinner = ora(chalk.cyan('Building library'));
+
+process.stdout.write('\n');
+spinner.start();
+
+webpack([webpackConfig, webpackDebugConfig], (error, stats) => {
+  if (error) {
+    spinner.fail(chalk.red('Something wrong happened:\n'));
+
+    throw error;
+  }
+
+  process.stdout.write('\n\n' + stats.toString({
+    colors: true,
+    modules: false,
+    children: false,
+    chunks: false,
+    chunkModules: false
+  }) + '\n\n');
+
+  spinner.succeed(chalk.green('Build finished with success!\n'));
+});

build/server/build.js

@@ -8,7 +8,6 @@ import historyApiFallback from 'connect-history-api-fallback';
 import config from '../config';
 import webpackConfig from '../webpack/dev';
 
-
 const app = express();
 const compiler = webpack(webpackConfig);
 const rootPath = path.join(__dirname, '..', '..');

build/server/index.js

@@ -10,7 +10,7 @@ Object.keys(baseWebpackConfig.entry).forEach((name) => {
 });
 
 export default merge(baseWebpackConfig, {
-  devtool: 'cheap-module-eval-source-map',
+  devtool: '#cheap-module-eval-source-map',
   module: {
     rules: [
       {

build/webpack/dev.js

@@ -67,7 +67,16 @@ const conf = merge(baseConfig, {
     }),
     new webpack.optimize.UglifyJsPlugin({
       compress: {
-        warnings: false
+        warnings: false,
+        screw_ie8: true,
+        conditionals: true,
+        unused: true,
+        comparisons: true,
+        sequences: true,
+        dead_code: true,
+        evaluate: true,
+        join_vars: true,
+        if_return: true
       },
       output: {
         comments: false
@@ -134,7 +143,9 @@ const conf = merge(baseConfig, {
       name: 'manifest',
       chunks: ['vendor']
     }),
-    new OptimizeCssAssetsPlugin()
+    new OptimizeCssAssetsPlugin({
+      canPrint: false
+    })
   ]
 });
 

build/webpack/prod-docs.js

@@ -93,7 +93,16 @@ export default merge(baseConfig, {
     }),
     new webpack.optimize.UglifyJsPlugin({
       compress: {
-        warnings: false
+        warnings: false,
+        screw_ie8: true,
+        conditionals: true,
+        unused: true,
+        comparisons: true,
+        sequences: true,
+        dead_code: true,
+        evaluate: true,
+        join_vars: true,
+        if_return: true
       },
       output: {
         comments: false
@@ -113,6 +122,8 @@ export default merge(baseConfig, {
       entryOnly: true
     }),
     new ExtractTextPlugin('[name].css'),
-    new OptimizeCssAssetsPlugin()
+    new OptimizeCssAssetsPlugin({
+      canPrint: false
+    })
   ]
 });

build/webpack/prod-lib.js

@@ -43,53 +43,52 @@
     "vue": "^2.1.10"
   },
   "devDependencies": {
-    "autoprefixer": "^6.7.2",
+    "autoprefixer": "^6.7.4",
     "autosize": "^3.0.20",
-    "babel-cli": "^6.22.2",
-    "babel-core": "^6.22.1",
+    "babel-cli": "^6.23.0",
+    "babel-core": "^6.23.1",
     "babel-eslint": "^7.1.1",
-    "babel-loader": "^6.2.10",
+    "babel-loader": "^6.3.2",
     "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
     "babel-preset-env": "^1.1.8",
     "babel-preset-es2015": "^6.22.0",
-    "babel-preset-es2017": "^6.22.0",
     "babel-preset-stage-0": "^6.22.0",
     "chalk": "^1.1.3",
     "chokidar": "^1.6.1",
-    "clipboard": "^1.5.16",
+    "clipboard": "^1.6.0",
     "connect-history-api-fallback": "^1.3.0",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.26.1",
     "css-mqpacker": "^5.0.1",
+    "date-fns": "^1.27.2",
     "element.scrollintoviewifneeded-polyfill": "^1.0.1",
-    "eslint": "^3.15.0",
+    "eslint": "^3.16.0",
     "eslint-friendly-formatter": "^2.0.7",
     "eslint-loader": "^1.6.1",
-    "eslint-plugin-html": "^2.0.0",
+    "eslint-plugin-html": "^2.0.1",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.14.1",
     "extract-text-webpack-plugin": "beta",
-    "file-loader": "^0.10.0",
-    "friendly-errors-webpack-plugin": "^1.1.3",
+    "friendly-errors-webpack-plugin": "^1.3.1",
     "highlight.js": "^9.9.0",
     "html-webpack-plugin": "^2.28.0",
     "node-sass": "^4.5.0",
     "optimize-css-assets-webpack-plugin": "^1.3.0",
     "optimize-js-plugin": "^0.0.4",
     "ora": "^1.1.0",
     "raw-loader": "^0.5.1",
-    "sass-loader": "^5.0.0",
+    "sass-loader": "^6.0.2",
     "url-loader": "^0.5.7",
-    "vue-hot-reload-api": "^2.0.8",
+    "vue-hot-reload-api": "^2.0.9",
     "vue-html-loader": "^1.2.3",
-    "vue-loader": "^10.3.0",
-    "vue-router": "^2.2.0",
+    "vue-loader": "^11.1.0",
+    "vue-router": "^2.2.1",
     "vue-style-loader": "^2.0.0",
     "vue-template-compiler": "^2.1.10",
     "webpack": "^2.2.1",
-    "webpack-dev-middleware": "^1.10.0",
-    "webpack-hot-middleware": "^2.16.1",
-    "webpack-merge": "^2.6.1"
+    "webpack-dev-middleware": "^1.10.1",
+    "webpack-hot-middleware": "^2.17.0",
+    "webpack-merge": "^3.0.0"
   }
 }