webpack.config.js

// For info about this file refer to webpack and webpack-hot-middleware documentation
// For info on how we're generating bundles with hashed filenames for cache busting: https://medium.com/@okonetchnikov/long-term-caching-of-static-assets-with-webpack-1ecb139adb95#.w99i89nsz
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var WebpackMd5Hash = require('webpack-md5-hash');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var autoprefixer = require('autoprefixer');
var path = require('path');
var moment = require('moment');

// https://stackoverflow.com/questions/37369053/webpack-babel-config-for-both-server-and-client-javascript

var sharedPlugins = [
  new webpack.optimize.AggressiveMergingPlugin({}),
  new webpack.optimize.OccurenceOrderPlugin(true),
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      drop_console: true,
      screw_ie8: true,
      sequences: true,
      properties: true,
      dead_code: true,
      drop_debugger: true,
      conditionals: true,
      comparisons: true,
      evaluate: true,
      booleans: true,
      loops: true,
      unused: true,
      if_return: true,
      join_vars: true,
      cascade: true,
      negate_iife: true,
      hoist_funs: true,
      warnings: false
    },
    mangle: {
      screw_ie8: true
    },
    output: {
      screw_ie8: true,
      preamble: '/* Website - ' + moment().format() + ' */'
    }
  })
];

var sharedServerPlugins = [
  new webpack.optimize.AggressiveMergingPlugin({}),
  new webpack.optimize.OccurenceOrderPlugin(true),
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      drop_console: false,
      screw_ie8: true,
      sequences: true,
      properties: true,
      dead_code: true,
      drop_debugger: false,
      conditionals: true,
      comparisons: true,
      evaluate: true,
      booleans: true,
      loops: true,
      unused: true,
      if_return: true,
      join_vars: true,
      cascade: true,
      negate_iife: true,
      hoist_funs: true,
      warnings: false
    },
    mangle: {
      screw_ie8: true
    },
    output: {
      screw_ie8: true,
      preamble: '/* Website - ' + moment().format() + ' */'
    }
  })
];

var PATHS = {
  clientSource: path.resolve(__dirname, './public/js/app.js'),
  clientBuild: path.resolve(__dirname, './dist/client'),
  serverSource: path.resolve(__dirname, './app.js'),
  serverBuild: path.resolve(__dirname, './dist/server')
};


module.exports = [
  {
    resolve: {
      extensions: ['*', '.js', '.json']
    },
    node: {
      fs: 'empty'
    },
    devtool: 'eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
    entry: {
      client: PATHS.clientSource
    },
    output: {
      path: PATHS.clientBuild,
      filename: '[name].js'
    },
    plugins: [
      // Hash the files using MD5 so that their names change when the content changes.
      new WebpackMd5Hash(),

      new webpack.HotModuleReplacementPlugin(),

      // Generate an external css file with a hash in the filename
      new ExtractTextPlugin('[name].[contenthash].css'),

      // Generate HTML file that contains references to generated bundles. See here for how this works: https://github.com/ampedandwired/html-webpack-plugin#basic-usage
      new HtmlWebpackPlugin({
        template: './views/index.ejs',
        minify: false,
        inject: true,
        // Note that you can add custom options here if you need to handle other custom logic in index.html
        // To track JavaScript errors via TrackJS, sign up for a free trial at TrackJS.com and enter your token below.
        trackJSToken: ''
      }),

      new webpack.LoaderOptionsPlugin({
        minimize: true,
        debug: false,
        noInfo: true, // set to false to see a list of every file being bundled.
        options: {
          sassLoader: {
            includePaths: [path.resolve(__dirname, 'lib/client/react/src', 'scss')]
          },
          context: '/',
          postcss: [autoprefixer]
        }
      })
    ],
    module: {
      rules: [
        {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?name=[name].[ext]'},
        {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff&name=[name].[ext]'},
        {test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream&name=[name].[ext]'},
        {test: /\.svg(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml&name=[name].[ext]'},
        {test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader?name=[name].[ext]'},
        {test: /\.ico$/, loader: 'file-loader?name=[name].[ext]'},
        {
          test: /(\.css|\.less)$/,
          loaders: ['style-loader', 'css-loader?sourceMap', 'postcss-loader', 'less-loader?sourceMap']
        },
        {
          test: /\.scss$/,
          loaders: ['style-loader', 'css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap']
        },
        { test: /\.json$/, loader: 'json-loader' }
      ]
    }
  },
  {
    resolve: {
      extensions: ['*', '.js', '.json']
    },
    node: {
      fs: 'empty'
    },
    devtool: 'eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
    entry: {
      client: PATHS.clientSource,
      server: PATHS.serverSource
    },
    output: {
      path: path.resolve(__dirname, './dist'),
      filename: '[name].js'
    },
    plugins: [
      // Hash the files using MD5 so that their names change when the content changes.
      new WebpackMd5Hash(),

      new webpack.HotModuleReplacementPlugin(),

      // Generate an external css file with a hash in the filename
      new ExtractTextPlugin('[name].[contenthash].css'),

      // Generate HTML file that contains references to generated bundles. See here for how this works: https://github.com/ampedandwired/html-webpack-plugin#basic-usage
      new HtmlWebpackPlugin({
        template: './views/index.ejs',
        minify: false,
        inject: true,
        // Note that you can add custom options here if you need to handle other custom logic in index.html
        // To track JavaScript errors via TrackJS, sign up for a free trial at TrackJS.com and enter your token below.
        trackJSToken: ''
      }),

      new webpack.LoaderOptionsPlugin({
        minimize: true,
        debug: false,
        noInfo: true, // set to false to see a list of every file being bundled.
        options: {
          sassLoader: {
            includePaths: [path.resolve(__dirname, 'lib/client/react/src', 'scss')]
          },
          context: '/',
          postcss: [autoprefixer]
        }
      })
    ],
    module: {
      rules: [
        {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?name=[name].[ext]'},
        {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff&name=[name].[ext]'},
        {test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream&name=[name].[ext]'},
        {test: /\.svg(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml&name=[name].[ext]'},
        {test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader?name=[name].[ext]'},
        {test: /\.ico$/, loader: 'file-loader?name=[name].[ext]'},
        {
          test: /(\.css|\.less)$/,
          loaders: ['style-loader', 'css-loader?sourceMap', 'postcss-loader', 'less-loader?sourceMap']
        },
        {
          test: /\.scss$/,
          loaders: ['style-loader', 'css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap']
        },
        { test: /\.json$/, loader: 'json-loader' }
      ]
    }
  }
];