Serving webpack assets to an ASP.NET app?
<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>