webpack.config.ts

// tslint:disable:no-implicit-dependencies
// tslint:disable:import-name
import { AureliaPlugin, ModuleDependenciesPlugin } from "aurelia-webpack-plugin";
import ExtractTextPlugin from "extract-text-webpack-plugin";
import { readFileSync } from "fs";
import HtmlWebpackPlugin from "html-webpack-plugin";
import * as path from "path";
import * as webpack from "webpack";
import autoprefixer from "autoprefixer";

const pkg = JSON.parse(readFileSync("package.json", "utf-8"));

const paths = {
  base: path.resolve(__dirname),
  src: path.resolve(__dirname, "src"),
  demo: path.resolve(__dirname, "demo"),
  nodeModules: path.resolve(__dirname, "node_modules"),
  bluebird: path.resolve(__dirname, "node_modules", "bluebird", "js", "browser", "bluebird"),
  tsconfig: path.resolve(__dirname, "configs/tsconfig-demo.json")
};

const load = {
  style: { loader: "style-loader" },
  css: { loader: "css-loader" },
  postcss: {
    loader: "postcss-loader",
    options: { plugins: () => [autoprefixer({ browsers: ["last 2 versions"] })] }
  },
  html: { loader: "html-loader" },
  sass: { loader: "sass-loader" },
  ts: {
    loader: "ts-loader",
    options: { configFile: paths.tsconfig }
  },
  file: { loader: "file-loader", options: { name: "[path][name].[ext]" } },
  expose: { loader: "expose-loader?Promise" }
};

const minifyOpts = {
  removeComments: true,
  collapseWhitespace: true,
  collapseInlineTagWhitespace: true,
  collapseBooleanAttributes: true,
  removeAttributeQuotes: true,
  minifyCSS: true,
  minifyJS: true,
  removeScriptTypeAttributes: true,
  removeStyleLinkTypeAttributes: true,
  ignoreCustomFragments: [/\${.*?}/g]
};

function configure(env: { server?: boolean; production?: boolean } = {}): webpack.Configuration {
  const { server, production } = env;
  const baseUrl = production ? `/${pkg.repository.url}/` : "/";
  const filename = "[name].[hash].bundle";

  return {
    mode: production ? "production" : "development",
    resolve: {
      extensions: [".ts", ".js"],
      modules: [paths.src, paths.demo, paths.nodeModules],
      alias: {
        bluebird: paths.bluebird,
        "@src": paths.src
      }
    },
    entry: {
      app: ["aurelia-bootstrapper"],
      vendor: ["bluebird"]
    },
    output: {
      path: paths.base,
      publicPath: baseUrl,
      filename: `${filename}.js`,
      sourceMapFilename: `${filename}.map`
    },
    devtool: production ? "nosources-source-map" : "cheap-module-eval-source-map",
    performance: { hints: false },
    devServer: {
      historyApiFallback: true,
      open: true,
      lazy: false
    },
    module: {
      rules: [
        {
          test: /\.css$/i,
          use: [load.style, load.css, load.postcss],
          issuer: [{ not: [{ test: /\.html?$/i }] }]
        },
        {
          test: /\.css$/i,
          use: [load.css, load.postcss],
          issuer: [{ test: /\.html?$/i }]
        },
        {
          test: /\.html?$/i,
          use: [load.html]
        },
        {
          test: /\.scss$/i,
          use: [load.style, load.css, load.postcss, load.sass],
          issuer: /\.[tj]s$/i
        },
        {
          test: /\.scss$/i,
          use: [load.css, load.postcss, load.sass],
          issuer: /\.html?$/i
        },
        {
          test: /\.ts$/i,
          use: [load.ts],
          exclude: /node_modules/i
        },
        {
          test: /[\/\\]node_modules[\/\\]bluebird[\/\\].+\.js$/i,
          use: [load.expose]
        },
        {
          test: /\.(jpe?g|png|gif|svg|tff|eot|otf|woff2?)$/i,
          use: [load.file]
        }
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "demo/index.ejs",
        metadata: { title: pkg.name, server, baseUrl, debug: !production },
        minify: !!production && minifyOpts
      }),
      new AureliaPlugin(),
      new webpack.ProvidePlugin({ Promise: "bluebird" }),
      new ModuleDependenciesPlugin({ "aurelia-testing": ["./compile-spy", "./view-spy"] })
    ]
  };
}

export default configure;