Webpack config

webpack.config.js

/* eslint-disable strict, comma-dangle, prettier/prettier */

'use strict';

const path = require('path');
const webpack = require('webpack');
const WebpackGitHash = require('webpack-git-hash');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin');
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const constants = require('./constants');

const isProd = process.env.NODE_ENV === 'production';
const styles = path.resolve(__dirname, 'src/styles.scss');

const processEnv = {
  NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
  // Tell i18n to not warn us:
  SILENCE_POLYGLOT_WARNINGS: JSON.stringify(true),
  SENTRY_RELEASE: JSON.stringify('development'),
};

const config = {
  entry: {
    core: [
      styles,
      // Main entry point:
      path.resolve(__dirname, 'src', 'index.jsx'),
    ],
    products: [path.resolve(__dirname, 'src', 'products', 'index.jsx')],
  },
  resolveLoader: {
    modules: [path.join(__dirname, 'node_modules'), 'node_modules'],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: path.join(__dirname, 'src'),
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
        },
      },
      {
        test: /\.(ttf|eot|svg|woff|woff2|mp3|png)$/,
        loader: 'url-loader',
        options: {
          limit: 1000,
          name: 'assets/[name].[ext]?[hash:7]',
        },
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'postcss-loader'],
        }),
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'postcss-loader', 'sass-loader'],
        }),
      },
    ],
  },
  resolve: {
    // We know we already have fetch on the page:
    alias: {
      'whatwg-fetch': 'empty-module',
    },
    modules: [path.join(__dirname, 'src'), 'node_modules'],
    extensions: ['.js', '.jsx', '.json', '.scss'],
  },
  output: {
    path: path.join(__dirname, 'public', constants.webpack.publicFolder),
    filename: 'assets/[name].js',
    chunkFilename: 'assets/[name].[id].bundle.js',
    publicPath: constants.webpack.publicFolder,
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': processEnv,
      __DEV__: JSON.stringify(!isProd),
    }),
    // Fix moment pulling in tons of locales:
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new ExtractTextPlugin({
      filename: 'assets/styles.[chunkhash].css',
      disable: !isProd,
    }),
    new HtmlWebpackPlugin({
      chunks: ['core'],
      template: 'src/index.html',
      filename: 'index.html',
      favicon: 'src/favicon.png',
    }),
  ],
  node: {
    global: true,
    process: false,
    Buffer: false,
    setImmediate: false,
  },
};

// Environment-based configs:
if (isProd) {
  const webpackGitHash = new WebpackGitHash();
  processEnv.SENTRY_RELEASE = JSON.stringify(webpackGitHash.skipHash);
  // Add filename hashing:
  config.output.filename = 'assets/[name].[githash].[chunkhash].js';
  config.output.sourceMapFilename = '[file].map';
  config.output.chunkFilename = 'assets/[name].[id].[githash].[chunkhash].bundle.js';
  config.devtool = 'source-map';

  // prettier-ignore
  config.plugins.push(
    webpackGitHash,
    new webpack.optimize.ModuleConcatenationPlugin(),
    new ParallelUglifyPlugin({
      cacheDir: 'tmp/uglify',
      sourceMap: true,
      uglifyES: {
        compress: {
          warnings: false,
          unused: true,
          dead_code: true,
        },
        output: {
          comments: false,
        },
      },
    }),
    new ServiceWorkerWebpackPlugin({
      entry: path.join(__dirname, 'src', 'sw.js'),
      filename: 'assets/sw.js',
      publicPath: constants.webpack.publicFolder,
    })
  );
} else {
  // Emable hot module replacement:
  config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin()
  );
  config.devtool = 'cheap-module-eval-source-map';

  // Add Hot Module Reloading:
  // prettier-ignore
  config.entry.core.unshift(
    'react-hot-loader/patch',
    'webpack-dev-server/client?/',
    'webpack/hot/only-dev-server'
  );
  config.output.pathinfo = true;
}

module.exports = config;