title: How do you configure a Webpack dev server to serve a specific folder while running the rest of the site through a different server?
body: <p>Some quick background:</p>
  
  <p>My company's site runs off a CMS with the CMS handling all routing.  There are no html files, only razor files (.cshtml).  While redoing the site from scratch is what I'd prefer to do, it's not an option, so I'm attempting to modernize the site slowly over time by integrating vue.js with a webpack development workflow piecemeal on a page-by-page basis.</p>
  
  <p>I've spent considerable time setting up webpack in a manner that allows it to process files found in the /dist/ folder only - everything else is served via <a href="http://my.server/" rel="noreferrer">http://my.server/</a> and handled by the CMS and backend.</p>
  
  <p>Through trial &amp; error I managed to get webpack-dev-server serving files in the /dist/ folder while allowing the rest of the server to serve everything else (via <a href="http://my.server/" rel="noreferrer">http://my.server/</a>).  Unfortunately, this ONLY works when the file paths for the webpack-dev-server part are specifically referencing "<a href="http://localhost:8080/" rel="noreferrer">http://localhost:8080/</a>" which is obviously unacceptable.</p>
  
  <p>The dev environment code must be exactly like the production environment code, therefore <code>&lt;script src="http://localhost:8080/dist/build.js"&gt;&lt;/script&gt;</code> is simply unacceptable.</p>
  
  <p>However, if I simply write <code>&lt;script src="/dist/build.js"&gt;&lt;/script&gt;</code> the server resolves this to <code>&lt;script src="http://my.server/dist/build.js"&gt;&lt;/script&gt;</code> which is obviously incorrect and results in a 404 (because those files are being served only from the dev server).</p>
  
  <p>My question is, "how do I configure the webpack-dev-server to serve everything in the /dist/ folder from itself, while allowing everything else on the site to be served via "<a href="http://my.server" rel="noreferrer">http://my.server</a>"?</p>
  
  <p>Here's my webpack.config.js file for reference:</p>
  
  <pre><code>var path = require('path')
  var webpack = require('webpack')
  
  module.exports = {
    entry: './src/main.js',
    output: {
      path: path.resolve(__dirname, './dist'),
      publicPath: '/dist/',
      filename: 'build.js'
    },
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            loaders: {
              // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
              // the "scss" and "sass" values for the lang attribute to the right configs here.
              // other preprocessors should work out of the box, no loader config like this nessessary.
              'scss': 'vue-style-loader!css-loader!sass-loader',
              'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
            }
            // other vue-loader options go here
          }
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/
        },
        {
          test: /\.(png|jpg|gif|svg)$/,
          loader: 'file-loader',
          options: {
            name: '[name].[ext]?[hash]'
          }
        }
      ]
    },
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.common.js'
      }
    },
    devServer: {
      publicPath: '/dist/',
      historyApiFallback: true,
      noInfo: false,
      proxy: [{
        context: function(pathname, req) {
          // exclude /src/ and /dist/
          return !pathname.match("^/(src|dist)/");
        },
        target: {
          "host": "my.server",
          "protocol": 'http:',
          "port": 80
        },
        ignorePath: false,
        changeOrigin: true,
        secure: false
      }]
    },
    performance: {
      hints: false
    },
    devtool: '#eval-source-map'
  }
  
  if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: '"production"'
        }
      }),
      new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        compress: {
          warnings: false
        }
      }),
      new webpack.LoaderOptionsPlugin({
        minimize: true
      })
    ])
  }
  </code></pre>
  
  <p>While likely unnecessary to answer this question, if you'd like additional background, my initial problem (and solution to that problem) are located here:  <a href="https://stackoverflow.com/questions/41989185/using-a-simple-vue-js-webpack-setup-how-does-one-configure-the-dev-server-to-pr/41991286#41991286">Using a simple vue.js/webpack setup, how does one configure the dev server to proxy everything EXCEPT a few .js and .vue files?</a></p>