Knocks/FrontEnd/config/webpack.common.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebPackPlugin = require('copy-webpack-plugin');
var helpers = require('./helpers');
var path = require('path');

module.exports = {
  entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
  },
  resolve: {
    extensions: ['.ts', '.js', '.json']/*,
    modules: [
      // helpers.root('src')
      // helpers.root('node_modules')
    ]*/
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        enforce: 'pre',
        loader: 'tslint-loader',
        options: {
          configuation: require('../tslint.json'),
          emitErrors: true,
          failOnHint: true
        }
      },
      {
        test: /\.ts$/,
        // use: ['awesome-typescript-loader', 'angular2-template-loader', 'angular-router-loader']
        loaders: [
          'babel-loader?presets[]=es2017',
          'awesome-typescript-loader',
          // For angular2:
          'angular2-template-loader',
          'angular-router-loader'
          // 'angular2-router-loader?genDir=compiled/app&aot=true'
        ],
        exclude: [/\.(spec|e2e|d)\.ts$/]
      },
      {
        test: /\.js$/,
        // loader: 'babel-loader?presets[]=es2015&presets[]=es2017&presets[]=react&plugins[]=transform-runtime&plugins[]=transform-decorators-legacy&plugins[]=transform-class-properties',
        loader: 'babel-loader?presets[]=es2017',
        exclude: [/\.(spec|e2e|d)\.js$/]
      },
      {
        test: /\.html$/,
        use: [
          // {loader: 'raw-loader'},
          {loader: 'html-loader'}
        ],
        exclude: [helpers.root('src/index.html')]
      },
      {
        test: /\.(pug|jade)$/,
        exclude: /node_modules/,
        loader: 'pug-ng-html-loader',
        query: {
          doctype: 'html'
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file-loader',
        options: {name: 'assets/[name].[hash].[ext]'}
      },
      {
        test: /\.css$/,
        exclude: [
          helpers.root('src'),
        ],
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {sourceMap: true, importLoaders: 1, minimize: true}
            }
          ]
        })
      },
      {
        test: /\.css$/,
        include: [
          helpers.root('src')
        ],
        loader: 'raw-loader'
      },
      {
        test: /\.scss$/,
        exclude: [
          helpers.root('src')
        ],
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {sourceMap: true, importLoaders: 1, minimize: true}
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true,
                includePaths: [
                  helpers.root('node_modules')/*,
                  helpers.root('node_modules/@material/*')*/
                ]
              }
            }
          ]
        })
      },
      {
        test: /\.scss$/,
        include: [
          helpers.root('src')
        ],
        use: [
          'raw-loader',
          'resolve-url-loader',
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              includePaths: [
                helpers.root('node_modules')/*,
                helpers.root('node_modules/@material/*')*/
              ]
            }
            // options: {
            //     importer: (url, prev, done) => {
            //         // if (url[0] === '~') {
            //         //     console.log('inside', url,url.substr(1), path.resolve('node_modules', url.substr(1)));
            //         //     url = path.resolve('node_modules', url.substr(1));
            //         // } else if (url.startsWith('styles/')) {
            //         //     url = path.resolve('src/', url);
            //         // }

            //         return { file: url }
            //     }
            // }
          }
        ]
      }
    ],

    loaders: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: [/node_modules/],
        query: {
          presets: ['es2015', 'es2017', {"modules": false}]
          // presets: ['es2015', 'es2017', 'react', {"modules": false}],
          // plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties']
        }
      },
      {
        test: /\.(ts|tsx)$/,
        loader: 'babel-loader',
        exclude: [/node_modules/],
        query: {
          presets: ['es2015', 'es2017', {"modules": false}]
        }
      }
    ]
  },

  plugins: [
    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)(@angular|esm5)/, // /angular(\\|\/)core(\\|\/)@angular/,
      helpers.root('src')
    ),

    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }),

    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),

    new CopyWebPackPlugin([{
      from: helpers.root('src', 'i18n'),
      to: 'i18n'
    }, {
      from: helpers.root('favicons'),
      to: 'favicons'
    }])
  ]
};