Webpack config used by http://crrmacarse.github.io/

common.js

import { join, resolve } from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import { CleanWebpackPlugin } from 'clean-webpack-plugin';

export const entry = join(process.cwd(), '/src/index.tsx');

export const output = {
  path: join(process.cwd(), '/dist'),
  filename: '[name].[hash].bundle.js',
  chunkFilename: '[name].[hash].bundle.js',
  publicPath: '/',
};

export const moduleResolver = {
  modules: [
    'node_modules',
    resolve(__dirname, '..', 'src'),
  ],
  extensions: ['.ts', '.tsx', '.js'],
  alias: {
    assets: resolve(__dirname, '..', 'src/assets/'),
  },
};

export const rules = [
  {
    test: /\.ts(x?)$/,
    exclude: /node_modules/,
    enforce: 'pre',
    use: 'eslint-loader',
  },
  {
    test: /\.ts(x?)$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'ts-loader',
      },
    ],
  },
  {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
  },
  {
    enforce: 'pre',
    test: /\.js$/,
    loader: 'source-map-loader',
  },
  {
    test: /\.(png|jpg|jpeg|gif|svg|ico|pdf)$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 8192,
          name: '[contentHash].[hash].[ext]',
          outputPath: 'assets',
          publicPath: 'assets',
        },
      },
      {
        loader: 'image-webpack-loader',
        options: {
          mozjpeg: {
            progressive: true,
            quality: 65,
          },
          // optipng.enabled: false will disable optipng
          optipng: {
            enabled: false,
          },
          pngquant: {
            quality: [0.65, 0.90],
            speed: 4,
          },
          gifsicle: {
            interlaced: false,
          },
          // the webp option will enable WEBP
          webp: {
            quality: 80,
            enabled: true,
          },
        },
      },
    ],
  },
  {
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'file-loader',
  },
  {
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'file-loader',
  },
];

export const plugins = [
  new CleanWebpackPlugin(),
  new HtmlWebpackPlugin({
    template: join(process.cwd(), '/src/index.html'),
    inject: 'body',
    favicon: join(process.cwd(), './src/assets/ico/favicon.ico'),
  }),
];

development.js

import {
  entry, output, moduleResolver, rules, plugins,
} from './common';

export default {
  mode: 'development',
  devtool: 'source-map',
  entry,
  output,
  resolve: moduleResolver,
  module: {
    rules: [
      ...rules,
      {
        test: /\.(scss|css)$/i,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader',
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
    ],
  },
  plugins,
};

hot.js

import { join } from 'path';
import {
  entry, output, moduleResolver, rules, plugins,
} from './common';

const PORT = process.env.PORT || 3333;

const devServer = () => ({
  hot: true,
  contentBase: join(process.cwd(), '/dist'),
  writeToDisk: true,
  historyApiFallback: true,
  compress: true,
  port: PORT,
  overlay: {
    errors: true,
    warnings: true,
  },
});

export default {
  mode: 'development',
  devtool: 'source-map',
  entry,
  output,
  resolve: moduleResolver,
  module: {
    rules: [
      ...rules,
      {
        test: /\.(scss|css)$/i,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader',
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
    ],
  },
  plugins,
  devServer: devServer(),
};

production.js

import CompressionPlugin from 'compression-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import TerserPlugin from 'terser-webpack-plugin';
import {
  entry, output, moduleResolver, rules, plugins,
} from './common';

export default {
  mode: 'production',
  devtool: 'source-map',
  entry,
  output,
  resolve: moduleResolver,
  module: {
    rules: [
      ...rules,
      {
        test: /\.(scss|css)$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [
    ...plugins,
    new CompressionPlugin(),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: '[contentHash].[hash].css',
      chunkFilename: '[contentHash].[hash].css',
    }),
  ],
  optimization: {
    minimizer: [new TerserPlugin({
      terserOptions: {
        safari10: true,
      },
    })],
  },
};

webpack.config.babel.js

// NOTE: This should be run together with babel-preset

// eslint-disable-next-line import/no-dynamic-require, global-require
export default (env) => require(`./compiler/${env}.js`);