title: Serving webpack assets to an ASP.NET app?
body: <p>I doing the front-end for this ASP.NET 4 project (I know almost nothing of .NET) in which when I press F5 or Ctrl-F5 the app serving is the Index.cshtml on <a href="http://localhot:52724" rel="nofollow">http://localhot:52724</a> but my webpack config serves assets on <a href="http://localhost:8000" rel="nofollow">http://localhost:8000</a> when I run <code>npm start</code>. It is a React front-end.</p>
  
  <p>In the index.cshtml file if I refer to my JS using the following everything is fine.</p>
  
  <pre><code>&lt;script src="http://localhost:8000/assets/app.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>But I would prefer to serve it as</p>
  
  <pre><code>&lt;script src="assets/app.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>on the same port, if possible. Or maybe there is a better approach to this?</p>
  
  <p>Here is the base.js (being imported in the webpack.config.js)</p>
  
  <pre><code>'use strict';
  
  var path = require('path');
  var port = 8000;
  var srcPath = path.join(__dirname, '/../src');
  var publicPath = '/assets/';
  
  var additionalPaths = [];
  
  module.exports = {
      additionalPaths: additionalPaths,
      port: port,
      debug: true,
      output: {
          path: path.join(__dirname, '/../dist/assets'),
          filename: 'app.js',
          publicPath: publicPath
      },
      devServer: {
          contentBase: './src/',
          historyApiFallback: true,
          hot: true,
          inline: true,
          port: port,
          publicPath: publicPath,
          noInfo: false
      },
      resolve: {
          extensions: ['', '.js', '.jsx'],
          alias: {
              actions: srcPath + '/actions/',
              components: srcPath + '/components/',
              sources: srcPath + '/sources/',
              stores: srcPath + '/stores/',
              styles: srcPath + '/styles/',
              config: srcPath + '/config/' + process.env.REACT_WEBPACK_ENV
          }
      },
      module: {
          preLoaders: [{
              test: /\.(js|jsx)$/,
              include: srcPath,
              loader: 'eslint-loader'
          }],
          loaders: [{
              test: /\.css$/,
              loader: 'style-loader!css-loader'
          }, {
              test: /\.sass/,
              loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&amp;indentedSyntax'
          }, {
              test: /\.scss/,
              loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
          }, {
              test: /\.less/,
              loader: 'style-loader!css-loader!less-loader'
          }, {
              test: /\.styl/,
              loader: 'style-loader!css-loader!stylus-loader'
          }, {
              test: /\.(png|jpg|gif)$/,
              loader: 'url-loader?limit=8192'
          }, {
              test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
              loader: 'url-loader?limit=10000&amp;mimetype=application/font-woff'
          }, {
              test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
              loader: 'file-loader'
          }]
      }
  };
  </code></pre>
  
  <p>And here is the dev.js (being imported in the webpack.config.js)</p>
  
  <pre><code>'use strict';
  
  var path = require('path');
  var webpack = require('webpack');
  var _ = require('lodash');
  
  var baseConfig = require('./base');
  
  // Add needed plugins here
  var BowerWebpackPlugin = require('bower-webpack-plugin');
  
  var config = _.merge({
    entry: [
      'webpack-dev-server/client?http://localhost:8000',
      'webpack/hot/only-dev-server',
      './UI/src/index'
    ],
    cache: true,
    devtool: 'eval',
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin(),
      new BowerWebpackPlugin({
        searchResolveModulesDirectories: false
      }),
      new webpack.ProvidePlugin({
          jQuery: 'jquery',
          'fetch': 'imports?this=&gt;global!exports?global.fetch!whatwg-fetch'
      })
    ]
  }, baseConfig);
  
  // Add needed loaders
  config.module.loaders.push({
    test: /\.(js|jsx)$/,
    loader: 'react-hot!babel-loader',
    include: [].concat(
      config.additionalPaths,
      [ path.join(__dirname, '/../src') ]
    )
  });
  
  module.exports = config;
  </code></pre>
  
  <p>and the server.js file</p>
  
  <pre><code>/*eslint no-console:0 */
  require('core-js/fn/object/assign');
  var webpack = require('webpack');
  var WebpackDevServer = require('webpack-dev-server');
  var config = require('./webpack.config');
  var open = require('open');
  
  new WebpackDevServer(webpack(config), config.devServer)
  .listen(config.port, 'localhost', function(err) {
    if (err) {
      console.log(err);
    }
    console.log('Listening at localhost:' + config.port);
    //console.log('Opening your system browser...');
    //open('http://localhost:' + config.port);
  });
  </code></pre>