webpack configuration

loaders.js

'use strict';

const ExtractTextPlugin = require('extract-text-webpack-plugin');

const path = require('path');

exports.tslint = {
  test: /\.ts$/,
  loader: 'tslint',
  exclude: [
    /node_modules/,
    /typings\/custom/
  ],
};

exports.istanbulInstrumenter = {
  test: /^(.(?!\.test))*\.ts$/,
  loader: 'istanbul-instrumenter-loader',
};

exports.ts = {
  test: /\.ts$/,
  loader: 'babel-loader!awesome-typescript-loader',
  exclude: [
    /node_modules/,
    /typings\/custom/
  ],
};

exports.js = {
  test: /\.js$/,
  loader: 'babel',
  exclude: /node_modules/,
};

exports.html = {
  test: /\.html$/,
  loader: 'raw',
  exclude: /node_modules/,
};

exports.scssprod = {
  test: /\.scss$/,
  loader: ExtractTextPlugin.extract('css?sourceMap&modules&importLoaders=2&localIdentName=[name]__[local]!resolve-url!sass?config=sassLoader'),
  exclude: /\.(eot|woff|woff2|ttf|svg)(\?[\s\S]+)?$/
};

exports.scssdev = {
  test: /\.scss$/,
  loader: 'style!css?sourceMap&modules&importLoaders=2&localIdentName=[name]__[local]!resolve-url!sass?config=sassLoader',
  exclude: /node_modules/,
};

exports.css = {
  test: /\.s?(a|c)ss$/,
  loader: 'style!css?-minimize&sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]!resolve-url',
  exclude: /node_modules/,
};

exports.fonts = {
  test: /\.(eot|woff|woff2|ttf|svg)(\?[\s\S]+)?$/,
  loader: 'url-loader?limit=1000&name=fonts/[name].[ext]',
  exclude: /node_modules/,
  include: [path.resolve(__dirname, 'node_modules/mdi/fonts')]
};

plugins.js

'use strict';

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const SplitByPathPlugin = require('webpack-split-by-path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const path = require('path');

const sourceMap = process.env.TEST
  ? [new webpack.SourceMapDevToolPlugin({ filename: null, test: /\.ts$/ })]
  : [ ];

const basePlugins = [
  new webpack.DefinePlugin({
    __DEV__: process.env.NODE_ENV !== 'production',
    __PRODUCTION__: process.env.NODE_ENV === 'production',
    __TEST__: JSON.stringify(process.env.TEST || false),
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
  }),
  new HtmlWebpackPlugin({
    chunksSortMode: 'dependency',
    template: './src/index.html',
    inject: 'body',
  }),
  new webpack.NoErrorsPlugin(),
  new CopyWebpackPlugin([
    { from: 'src/img', to: 'img' },
    { from: 'src/partials', to: 'partials' },
    { from: './node_modules/lumX/dist/lumx.css', to: 'lumx.css' },
    { from: './node_modules/mdi/css/materialdesignicons.css', to: 'materialdesignicons.css' },
    { from: './node_modules/angular-material/angular-material.css', to: 'angular-material.css' },
    { from: './node_modules/angular-ranger/angular-ranger.css', to: 'angular-ranger.css' },
  ]),
  new ForkCheckerPlugin(),
  new ExtractTextPlugin(process.env.NODE_ENV === 'production' ?
    '[name].chunk.[chunkhash].css' : '[name].css', {
    allChunks: true
  }),
].concat(sourceMap);

const devPlugins = [
  new StyleLintPlugin({
    configFile: './.stylelintrc',
    files: ['src/**/*.s?(a|c)ss'],
    failOnError: false,
  }),
];

const prodPlugins = [
  new SplitByPathPlugin([
    { name: 'vendor', path: [path.join(__dirname, '../', '/node_modules/')] },
  ]),
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false,
    },
  }),
];

module.exports = basePlugins
  .concat(process.env.NODE_ENV === 'production' ? prodPlugins : [])
  .concat(process.env.NODE_ENV === 'development' ? devPlugins : []);

postcss.js

'use strict';

const webpack = require('webpack');

const postcssBasePlugins = [
  require('postcss-modules-local-by-default'),
  require('postcss-import')({
    addDependencyTo: webpack,
  }),
  require('postcss-cssnext'),
];
const postcssDevPlugins = [];
const postcssProdPlugins = [
  require('cssnano')({
    safe: true,
    sourcemap: true,
    autoprefixer: false,
  }),
];

const postcssPlugins = postcssBasePlugins
  .concat(process.env.NODE_ENV === 'production' ? postcssProdPlugins : [])
  .concat(process.env.NODE_ENV === 'development' ? postcssDevPlugins : []);

module.exports = () => postcssPlugins;

webpack.config.js

'use strict';

const path = require('path');
const proxy = require('./server/webpack-dev-proxy');
const loaders = require('./webpack/loaders');
const plugins = require('./webpack/plugins');
const postcssInit = require('./webpack/postcss');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const bourbon = require('node-bourbon').includePaths;

module.exports = {
  entry: { app: './src/app.ts' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: process.env.NODE_ENV === 'production' ?
      '[name].[chunkhash].js' : '[name].js',
    publicPath: '/',
    sourceMapFilename: process.env.NODE_ENV === 'production' ?
      '[name].[chunkhash].js.map' : '[name].js.map',
    chunkFilename: process.env.NODE_ENV === 'production' ?
      '[name].chunk.[chunkhash].js' : '[name].js',
  },

  devtool: process.env.NODE_ENV === 'production' ?
    'source-map' :
    'inline-source-map',

  resolve: {
    //modulesDirectories: ['node_modules'],
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.js', '.scss']
  },
  plugins: plugins,
  //postcss: postcssInit,

  devServer: {
    contentBase: './src',
    historyApiFallback: { index: '/' },
    proxy: Object.assign({}, proxy(), { '/api/*': 'http://localhost:3000' }),
  },

  module: {
    preLoaders: [
      //loaders.tslint,
    ],
    loaders: [
      loaders.ts,
      loaders.js,
      loaders.html,
      process.env.NODE_ENV === 'production' ? loaders.scssprod : loaders.scssdev,
      loaders.fonts,
    ],
  },
  sassLoader: {
    sourceMap: true,
    includePaths: [bourbon, path.resolve(__dirname, 'node_modules/mdi/scss')],
    excludePaths: [path.resolve(__dirname, 'node_modules')],
  }
};