title: Using Webpack in an MVC 5 Angular 2 application
body: <p>I created a very basic MVC 5 Angular 2 app which works fine if I use SystemJS. However, I wanted to be able to bundle my code so I could add it to my BundleConfig file and decided to look into Webpack. I've got it to a point where I can generate the bundles and save them to disk (using webpack --watch) but when I include them in my BundleConfig it doesn't work because it's unable to find the templates for the component.</p>
  
  <p>So the question is: Is there a better way to do this? What I mean is - I want to stick with MVC 5, use Visual Studio (which means using the VS Typescript compiler) and be able to bundle my js/css files.</p>
  
  <p>I'm quite new to this framework (Angular 2/ Webpack etc.) so please let me know if you need more information.</p>
  
  <p>Thanks!</p>
  
  <p>Not sure how helpful this would be but here is the webpack config:</p>
  
  <p>webpack.config.js</p>
  
  <pre><code>module.exports = require('./Config/webpack.dev.js');
  </code></pre>
  
  <p>webpack.dev.js</p>
  
  <pre><code>var webpack = require('webpack');
  var webpackMerge = require('webpack-merge');
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  var commonConfig = require('./webpack.common.js');
  var helpers = require('./helpers');
  
  const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
  
  module.exports = webpackMerge(commonConfig, {
      devtool: 'source-map',
  
      output: {
          path: helpers.root('dist'),
          publicPath: 'http://localhost:64005',
          filename: '[name].js',
          chunkFilename: '[id].[hash].chunk.js'
      },
  
      plugins: [
          new webpack.NoEmitOnErrorsPlugin(),
          new ExtractTextPlugin('[name].css'),
          //new webpack.DefinePlugin({
          //    'process.env': {
          //        'ENV': JSON.stringify(ENV)
          //    }
          //})
          //new webpack.LoaderOptionsPlugin({
          //    htmlLoader: {
          //        minimize: false // workaround for ng2
          //    }
          //})
      ]
  });
  </code></pre>
  
  <p>webpack.common.js</p>
  
  <pre><code>var webpack = require('webpack');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  var helpers = require('./helpers');
  
  module.exports = {
      entry: {
          'polyfills': './Config/polyfills.js',
          'vendor': './Config/vendor.js',
          'app': './App/main.js'
      },
      resolve: {
          extensions: ['.js']
      },
      module: {
          rules: [
              //{
              //    test: /\.ts$/,
              //    loaders: [
              //        {
              //            loader: 'awesome-typescript-loader',
              //            options: { configFileName: helpers.root('', 'tsconfig.json') }
              //        }, 'angular2-template-loader'
              //    ]
              //},
              {
                  test: /\.html$/,
                  loader: 'html-loader'
              },
              {
                  test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                  loader: 'file-loader?name=Content/[name].[hash].[ext]'
              },
              {
                  test: /\.css$/,
                  exclude: helpers.root('', 'App'),
                  loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
              },
              {
                  test: /\.css$/,
                  include: helpers.root('', 'App'),
                  loader: 'raw-loader'
              }
          ]
      },
  
      plugins: [
          // Workaround for angular/angular#11580
          //new webpack.ContextReplacementPlugin(
          //    // The (\\|\/) piece accounts for path separators in *nix and Windows
          //    /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
          //    helpers.root('./'), // location of your src
          //    {} // a map of your routes
          //),
  
          new webpack.optimize.CommonsChunkPlugin({
              name: ['app', 'vendor', 'polyfills']
          })
  
          //new HtmlWebpackPlugin({
          //    template: 'Views/Shared/_Layout.cshtml'
          //})
      ]
  };
  </code></pre>
  
  <p><strong>UPDATE:</strong>
  Just to clarify, here's the process I want to have:
  1. Visual Studio transpiles the .ts files (As far as I know there isn't an easy way to tell Visual Studio to use the Typescript compiler from node_modules instead of its own).
  2. Webpack creates bundles from all the transpiled js files, which is working.
  3. BundleConfig makes those bundles available.</p>
  
  <p>The above process is working except that the template files aren't being served. If I use inline templates and css it works just fine.</p>
  
  <p>So maybe a more specific question would be: How do I use webpack to either add the templates/styles inline (Dunno if that's even possible) or serve those files in such a way that the components can find and load them?</p>