Loaders allow you to preprocess files as you require or import them. Loaders can transform files from a different language like TypeScript to JavaScript. It even allows you to import the CSS or SASS files right in your JavaScript files. To tell webpack to transform specific modules with loader, you need to configure it in the webpack config file. These loaders are not included in the webpack itself. You should install loaders as you need to use them. Update your webpack config files and add the loaders as follows:

var path = require('path');
var webpack = require('webpack'); 

// Webpack configuration
module.exports = { 
  // ....
  module: {
    rules: [
      {
        test: /.ts$/,
        loader: ['awesome-typescript-loader', 'angular2-template-loader']',
        exclude: [/node_modules/]
      },
      {
        test: /.json$/,
        loader: 'json-loader'
      },
      {
        test: /.html$/,
        loader: 'raw-loader'
      },
      {
        test: /.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file-loader?name=dist/[name]-[hash].[ext]'
      },
      {
        test: /.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  }
};

The previous configuration instructs webpack to use the specified loaders when importing that type of file. But these loaders should be installed separately using npm from the project root directory:

npm install --save-dev angular2-template-loader awesome-typescript-loader css-loader file-loader html-loader raw-loader style-loader typescript webpack webpack-target-electron-renderer

You also use yarn instead of npm. Change your command as follows if you are using yarn:

yarn add --dev angular2-template-loader awesome-typescript-loader css-loader file-loader html-loader raw-loader style-loader typescript webpack webpack-target-electron-renderer