fix(build): API updates & bundle processing optimizations

Author: mariuszm

webpack.base.conf.js

@@ -1,6 +1,7 @@
 const path              = require('path');
 const webpack           = require('webpack');
 const ROOT_PATH         = path.resolve(__dirname, './');
+
 const isExternal = (module) => {
   let userRequest = module.userRequest;
 
@@ -31,36 +32,30 @@ module.exports = {
   },
 
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.html$/,
-        loaders: [`ngtemplate-loader?relativeTo=${ROOT_PATH}/src`, 'html-loader'],
+        use: [`ngtemplate-loader?relativeTo=${ROOT_PATH}/src`, 'html-loader'],
         exclude: `${ROOT_PATH}/src/index.html`
       },
 
       {
         test: /\.js$/,
-        loaders: ['babel-loader', 'eslint-loader'],
+        use: ['babel-loader', 'eslint-loader'],
         exclude: /node_modules/
       },
 
       {
         test: /\.(png|jpg|gif|svg)$/,
-        loaders: ['url-loader?limit=8192&name=[path][name].[ext]?[hash]']
+        use: ['url-loader?limit=8192&name=[path][name].[ext]?[hash]']
       }
     ]
   },
 
   plugins: [
     new webpack.optimize.CommonsChunkPlugin({
       name: 'vendor',
-      minChunks: function (module) {
-        return isExternal(module);
-      }
-    }),
-
-    }),
-
-    new (webpack.optimize.OccurenceOrderPlugin || webpack.optimize.OccurrenceOrderPlugin)()
+      minChunks: (module) => isExternal(module)
+    })
   ]
 };

webpack.dev.config.js

@@ -1,30 +1,36 @@
 const baseConfig        = require('./webpack.base.conf');
+const path              = require('path');
 const webpack           = require('webpack');
 const merge             = require('webpack-merge');
-const validate          = require('webpack-validator');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
-module.exports = validate(merge(baseConfig, {
+module.exports = merge(baseConfig, {
 
-  devtool: '#source-map',
+  devtool: '#cheap-module-source-map',
 
   // devServer: {
   //   historyApiFallback: true,
   //   noInfo: true
   // },
 
+  output: {
+    chunkFilename: 'js/[name].js'
+  },
+
   module: {
-    loaders: [
-      { test: /\.css$/,         loaders: ['style-loader', 'css-loader?sourceMap', 'postcss-loader?sourceMap'] },
-      { test: /\.(sass|scss)$/, loaders: ['style-loader', 'css-loader?sourceMap', 'postcss-loader?sourceMap', 'sass-loader?sourceMap'] }
+    rules: [
+      { test: /\.css$/,         use: ['style-loader', 'css-loader?sourceMap', 'postcss-loader?sourceMap'] },
+      { test: /\.(sass|scss)$/, use: ['style-loader', 'css-loader?sourceMap', 'postcss-loader?sourceMap', 'sass-loader?sourceMap'] }
     ]
   },
 
   plugins: [
+    new webpack.NamedModulesPlugin(),
     new HtmlWebpackPlugin({
       template: './index.html',
       cache: true
     })
   ]
 
-}));
+});

webpack.prod.config.js

@@ -1,31 +1,43 @@
-const webpack            = require('webpack');
 const baseConfig         = require('./webpack.base.conf');
+const path               = require('path');
+const webpack            = require('webpack');
 const merge              = require('webpack-merge');
-const validate           = require('webpack-validator');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const ExtractTextPlugin  = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin  = require('html-webpack-plugin');
 
-module.exports = validate(merge(baseConfig, {
+module.exports = merge(baseConfig, {
 
-  devtool: '#eval',
+  devtool: '#source-map',
 
   output: {
     filename: 'js/[name].[hash].js',
     chunkFilename: 'js/[name].[hash].js'
   },
 
   module: {
-    loaders: [
-      { test: /\.css$/,         loader: ExtractTextPlugin.extract(['css-loader', 'postcss-loader']) },
-      { test: /\.(sass|scss)$/, loader: ExtractTextPlugin.extract(['css-loader', 'postcss-loader', 'sass-loader']) }
+    rules: [
+      { test: /\.css$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: ['css-loader', 'postcss-loader']
+        })
+      },
+      { test: /\.(sass|scss)$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: ['css-loader', 'postcss-loader', 'sass-loader']
+        })
+      }
     ]
   },
 
   plugins: [
     new CleanWebpackPlugin(['dist']),
-    new ExtractTextPlugin('styles/[name].[hash].css'),
-    new (webpack.optimize.OccurenceOrderPlugin || webpack.optimize.OccurrenceOrderPlugin)(),
+    new ExtractTextPlugin({
+      filename: 'styles/[name].[hash].css',
+      allChunks: true
+    }),
 
     new HtmlWebpackPlugin({
       template: './index.html',
@@ -40,4 +52,4 @@ module.exports = validate(merge(baseConfig, {
     })
   ]
 
-}));
+});