How do you configure a Webpack dev server to serve a specific folder while running the rest of the site through a different server?

619
February 03, 2017, at 10:25 AM

Some quick background:

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.

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 http://my.server/ and handled by the CMS and backend.

Through trial & 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 http://my.server/). Unfortunately, this ONLY works when the file paths for the webpack-dev-server part are specifically referencing "http://localhost:8080/" which is obviously unacceptable.

The dev environment code must be exactly like the production environment code, therefore <script src="http://localhost:8080/dist/build.js"></script> is simply unacceptable.

However, if I simply write <script src="/dist/build.js"></script> the server resolves this to <script src="http://my.server/dist/build.js"></script> which is obviously incorrect and results in a 404 (because those files are being served only from the dev server).

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 "http://my.server"?

Here's my webpack.config.js file for reference:

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
    })
  ])
}

While likely unnecessary to answer this question, if you'd like additional background, my initial problem (and solution to that problem) are located here: Using a simple vue.js/webpack setup, how does one configure the dev server to proxy everything EXCEPT a few .js and .vue files?

Answer 1

Change the publicPath: '/dist/' of webpack config to match your actual product path and then change the script SRC in index.html to point to the new public path.. i.e basically virtual path... Not necessarily need to be present on actual file system.. I have achieved the same in my project..

Rent Charter Buses Company
READ ALSO
Unable to use any JQuery methods attached to &ldquo;this&rdquo;

Unable to use any JQuery methods attached to “this”

When I console log "this", it show's the correct container and the correct HTML treeWhen I try this

318
PanResponder snaps Animated.View back to original position on second drag

PanResponder snaps Animated.View back to original position on second drag

I have created a PanResponder to move a AnimatedView vertically

323
What is the purpose of `constant.js` in d3-drag library?

What is the purpose of `constant.js` in d3-drag library?

In having a bit of a look at the source code for the d3-drag javascript (es6) module, I've noticed there is a file called constantjs whose entire contents are:

322
Verify authentication - Parse Cloud

Verify authentication - Parse Cloud

I want only the authenticated users to modify classes in the databaseFor example:

414