feat(build): split bundle into app and vendor, paramterize build

Author: tomastrajan

webpack.config.js

@@ -6,29 +6,55 @@ var webpack = require('webpack');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var CleanWebpackPlugin = require('clean-webpack-plugin');
 
-var paramsDefault = {
+var PARAMS_DEFAULT = {
+    resolve: {
+        extensions: ['', '.js', '.tpl.html']
+    },
+    entry: {
+        main: './src/main.js',
+        vendor: ['lodash', 'jquery', 'bootstrap', 'angular', 'angular-animate', 'angular-ui-bootstrap', 'angular-highlightjs']
+    },
     output: {
-        path: './build',
-        filename: '[name].[hash].js',
-        sourceMapFilename: '[name].[hash].map'
+        filename: '[name].[chunkhash].js',
+        sourceMapFilename: '[name].[chunkhash].map'
     },
-    server: {
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: './src/index.html',
+            inject: 'body'
+        }),
+        new webpack.ProvidePlugin({
+            $: 'jquery',
+            jQuery: 'jquery'
+        }),
+        new webpack.optimize.DedupePlugin()
+    ],
+    devServer: {
         port: 8081
-    }
+    },
+    progress: true,
+    colors: true
 };
-var paramsPerTarget = {
+var PARAMS_PER_TARGET = {
     DEV: {
         debug: true,
         devtool: 'inline-source-map',
         output: {
             filename: '[name].js'
-        }
+        },
+        plugins: [
+            new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
+        ]
     },
     BUILD: {
         debug: true,
+        output: {
+            path: './build'
+        },
         devtool: 'source-map',
         plugins: [
-            new CleanWebpackPlugin(['build'])
+            new CleanWebpackPlugin(['build']),
+            new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.[chunkhash].js', Infinity)
         ]
     },
     DIST: {
@@ -38,28 +64,22 @@ var paramsPerTarget = {
         },
         plugins: [
             new CleanWebpackPlugin(['dist']),
+            new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.[chunkhash].js', Infinity),
             new webpack.optimize.UglifyJsPlugin({
                 mangle: false
             })
         ]
     }
 };
 var TARGET = minimist(process.argv.slice(2)).TARGET || 'BUILD';
-var params = _.merge(paramsDefault, paramsPerTarget[TARGET]);
-printBuildInfo();
+var params = _.merge(PARAMS_DEFAULT, PARAMS_PER_TARGET[TARGET], _mergeArraysCustomizer);
+
+_printBuildInfo(params);
 
 module.exports = {
-    resolve: {
-        extensions: ['', '.js', '.tpl.html']
-    },
-    entry: {
-        main: './src/main.js'
-    },
-    output: {
-        path: params.output.path,
-        filename: params.output.filename,
-        sourceMapFilename: params.output.sourceMapFilename
-    },
+    resolve: params.resolve,
+    entry: params.entry,
+    output: params.output,
     module: {
         loaders: [
             {test: /\.js$/, loader: 'babel?optional[]=runtime&stage=1', exclude: /(\.test.js$|node_modules)/},
@@ -68,31 +88,26 @@ module.exports = {
             {test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/, loader: 'url?limit=50000'}
         ]
     },
-    plugins: [
-        new HtmlWebpackPlugin({
-            template: './src/index.html',
-            inject: 'body'
-        }),
-        new webpack.ProvidePlugin({
-            $: 'jquery',
-            jQuery: 'jquery'
-        })
-    ].concat(params.plugins || []),
-    devServer: {
-        port: params.server.port
-    },
+    plugins: params.plugins,
+    devServer: params.devServer,
     debug: params.debug,
     devtool: params.devtool,
-    progress: true,
-    colors: true
+    progress: params.progress,
+    colors: params.colors
 };
 
-function printBuildInfo() {
+function _printBuildInfo(params) {
     console.log('\nStarting ' + chalk.bold.green('"' + TARGET + '"') + ' build');
     if (TARGET === 'DEV') {
         console.log('Dev server: ' +
-            chalk.bold.yellow('http://localhost:' + params.server.port + '/webpack-dev-server/index.html') + '\n\n');
+            chalk.bold.yellow('http://localhost:' + params.devServer.port + '/webpack-dev-server/index.html') + '\n\n');
     } else {
         console.log('\n\n');
     }
 }
+
+function _mergeArraysCustomizer(a, b) {
+    if (_.isArray(a)) {
+        return a.concat(b);
+    }
+}