Improve the UI #2

js-frontend/config/webpackConfigParts.js

@@ -1,11 +1,214 @@
 /**
  * Created by andrew on 8/18/16.
  */
-export const useJSON = () => {};
-export const clean = () => {};
-export const useJQuery = () => {};
-export const extractBundle = () => {};
-export const extractLESS = () => {};
-export const purifyCSS = () => {};
-export const setupLess = () => {};
-export const devServer = () => {};
+const webpack = require('webpack');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const PurifyCSSPlugin = require('purifycss-webpack-plugin');
+
+exports.devServer = function(options) {
+  return {
+    entry: {
+      'webpack-dev-server': 'webpack-dev-server/client?http://localhost:8080',
+      hmr: 'webpack/hot/only-dev-server'
+    },
+    devServer: {
+      contentBase: './build',
+      hot: true,
+      historyApiFallback: true,
+      inline: true,
+      stats: 'errors-only',
+      host: options.host, // Defaults to `localhost`
+      port: options.port, // Defaults to 8080
+      proxy: {
+        '/user*' : {
+          target: 'http://localhost:8080'
+        },
+        '/login' : {
+          target: 'http://localhost:8080'
+        },
+        '/customers*' : {
+          target: 'http://localhost:8080'
+        },
+        '/accounts*' : {
+          target: 'http://localhost:8080'
+        },
+        '/transfers*' : {
+          target: 'http://localhost:8080'
+        }
+      }
+    },
+    watchOptions: {
+      // Delay the rebuild after the first change
+      aggregateTimeout: 300,
+      // Poll using interval (in ms, accepts boolean too)
+      poll: 1000
+    },
+    plugins: [
+      // Enable multi-pass compilation for enhanced performance
+      // in larger projects. Good default.
+      new webpack.HotModuleReplacementPlugin({
+        multiStep: true
+      })
+    ]
+
+  };
+};
+
+exports.setupCSS = function(paths) {
+  return {
+    module: {
+      loaders: [
+        {
+          test: /\.css$/,
+          loaders: ['style', 'css'],
+          include: paths
+        }
+      ]
+    }
+  };
+};
+
+exports.setupLess = function(paths) {
+  return {
+    module: {
+      loaders: [
+        {
+          test: /\.(le)|(c)ss$/,
+          loaders: ['style', 'css', 'less'],
+          include: paths
+        }
+      ]
+    }
+  };
+};
+
+exports.useJSON = function() {
+  return {
+    module: {
+      loaders: [
+        {
+          test: /\.json$/,
+          loaders: ['json']
+        }
+      ]
+    }
+  };
+};
+
+exports.minify = function() {
+  return {
+    plugins: [
+      new webpack.optimize.UglifyJsPlugin({
+        compress: {
+          warnings: false
+        }
+      })
+    ]
+  };
+};
+
+exports.extractBundle = function(options) {
+  const entry = {};
+  entry[options.name] = options.entries;
+
+  return {
+    // Define an entry point needed for splitting.
+    entry: entry,
+    plugins: [
+      // Extract bundle and manifest files. Manifest is
+      // needed for reliable caching.
+      new webpack.optimize.CommonsChunkPlugin({
+        names: [options.name, 'manifest']
+      })
+    ]
+  };
+};
+
+exports.clean = function(path) {
+  return {
+    plugins: [
+      new CleanWebpackPlugin([path], {
+        // Without `root` CleanWebpackPlugin won't point to our
+        // project and will fail to work.
+        root: process.cwd()
+      })
+    ]
+  };
+};
+
+
+exports.extractCSS = function(paths) {
+  return {
+    module: {
+      loaders: [
+        // Extract CSS during build
+        {
+          test: /\.css$/,
+          // loaders: ['style', 'css'],
+          loader: ExtractTextPlugin.extract('style', 'css'),
+          include: paths
+        }
+      ]
+    },
+    plugins: [
+      // Output extracted CSS to a file
+      new ExtractTextPlugin('[name].[chunkhash].css')
+    ]
+  };
+};
+
+exports.extractLESS = function(paths) {
+  return {
+    module: {
+      loaders: [
+        // Extract CSS during build
+        {
+          test: /\.(le)|(c)ss$/,
+          // loaders: ['style', 'css', 'less'],
+          loader: ExtractTextPlugin.extract(
+            "style-loader",
+            'css?sourceMap!' +
+            'less?sourceMap'
+          ),
+          include: paths
+        }
+      ]
+    },
+    plugins: [
+      // Output extracted CSS to a file
+      new ExtractTextPlugin('[name].[chunkhash].css')
+    ]
+  };
+};
+
+exports.purifyCSS = function(paths) {
+  return {
+    plugins: [
+      new PurifyCSSPlugin({
+        basePath: process.cwd(),
+        // `paths` is used to point PurifyCSS to files not
+        // visible to Webpack. You can pass glob patterns
+        // to it.
+        paths: paths,
+        purifyOptions: {
+          // minify: false,
+          // info: true,
+          // output: './output.css'
+        }
+      })
+    ]
+  }
+};
+
+exports.useJQuery = function() {
+  return {
+    plugins: [
+      new webpack.ProvidePlugin({
+        $: "jquery",
+        jQuery: "jquery"
+      })
+    ]
+  };
+
+};