webpack.config.js

import { join, resolve } from 'path'
import webpack from 'webpack'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import WebpackMd5Hash from 'webpack-md5-hash'
import CleanWebpackPlugin from 'clean-webpack-plugin'
import FaviconsWebpackPlugin from 'favicons-webpack-plugin'
import UglifyJSPlugin from 'uglifyjs-webpack-plugin'

const prod = process.env.NODE_ENV === 'production'

const dist = resolve(__dirname, 'dist')

let config = {
  resolve: {
    extensions: ['.js', '.svg'],
    alias: {
      components: resolve(__dirname, 'app/components/'),
      containers: resolve(__dirname, 'app/containers/'),
      core: resolve(__dirname, 'app/core/'),
      hoc: resolve(__dirname, 'app/hoc/'),
      assets: resolve(__dirname, 'assets/'),
      locales: resolve(__dirname, 'locales/'),
      config: resolve(__dirname, 'app/settings/config.js'),
      appConstants: resolve(__dirname, 'app/constants.js'),
      globalStore: resolve(__dirname, 'app/store.js'),
      app: resolve(__dirname, 'app/'),
      tests: resolve(__dirname, 'tests/'),
      quill: resolve(__dirname, 'node_modules/quill/quill.js'),
      quilljs: resolve(__dirname, 'node_modules/quill/')
    }
  },
  entry: {

    main: [
      join(__dirname, 'app/index.js')
    ],

    vendor: [
      'babel-polyfill',
      'basil.js',
      'detect-browser',
      'eventemitter3',
      'form-serialize',
      'jed',
      'js-base64',
      'keyboardjs',
      'moment',
      'moment-timezone',
      'pluralize',
      'prop-types',
      'quill',
      'rc-time-picker',
      'raven-js',
      'react',
      'react-autocomplete',
      'react-autosize-textarea',
      'react-confirm',
      'react-contenteditable',
      'react-datepicker',
      'react-document-title',
      'react-dom',
      'react-input-range',
      'react-onclickoutside',
      'react-popper',
      'react-redux',
      'react-router-dom',
      'react-script-loader-hoc',
      'react-stripe-elements',
      'react-tippy',
      'redux',
      'redux-orm',
      'redux-saga',
      'rich-text',
      'sharedb',
      'socket.io-client',
      'urijs',
      'whatwg-fetch'
    ]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [
          resolve(__dirname, 'app'),
          /\/node_modules\/quill/
        ],
        loader: 'babel-loader'
      }, {
        test: /\.po$/,
        loader: 'json-loader!po-loader?format=jed1.x'
      }, {
        test: /(.jpg|.png)$/,
        include: [
          resolve(__dirname, 'assets/images')
        ],
        loader: 'file-loader'
      }, {
        test: /\.(woff|woff2)$/,
        loader: 'file-loader'
      }, {
        test: /\.(scss|css)$/,
        use: [{
          loader: 'style-loader'
        }, {
          loader: 'css-loader'
        }, {
          loader: 'postcss-loader'
        }, {
          loader: 'sass-loader',
          options: {
            data: "@import '~core/styles/tapestry/helpers';"
          }
        }]
      },

      // TAPESTRY ICONS
      {
        test: /\.(svg)$/,
        include: /tapestry-css.+icons/,
        loader: 'svg-sprite-loader'
      },

      // OUR SVGS
      {
        test: /\.(svg)$/,
        exclude: [
          /tapestry-css.+icons/,
          /\/node_modules\/quill/
        ],
        loader: 'file-loader'
      },

      // QUILL
      {
        test: /\.svg$/,
        include: [
          /\/node_modules\/quill/
        ],
        use: [{
          loader: 'html-loader',
          options: {
            minimize: true
          }
        }]
      }
    ]
  },

  watch: !prod,

  output: {
    path: dist,
    filename: `[name]${!prod ? '' : '[chunkhash:8]'}.js`,
    publicPath: '/'
  },

  devtool: !prod ? 'cheap-module-eval-source-map' : false,

  context: __dirname,

  target: 'web',

  stats: 'errors-only',

  devServer: {
    hotOnly: true,
    historyApiFallback: true,
    overlay: {
      errors: true
    }
  },

  plugins: [
    new WebpackMd5Hash(),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: join(__dirname, 'app/index.html'),
      inject: true
    }),
    new FaviconsWebpackPlugin('assets/jam-favicon.png'),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module) {
        return module.context && module.context.includes('node_modules')
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
    })
  ]
}

if (prod) {
  config.plugins.push(new UglifyJSPlugin({
    sourceMap: true
  }))
  config.plugins.push(new webpack.HashedModuleIdsPlugin())
  config.plugins.push(new CleanWebpackPlugin(['dist'], {
    verbose: true,
    dry: false
  }))
}

module.exports = config