1

I'm in the nightmare process of updating one of my older projects from Webpack 3 to 4 and it's introducing a whole chain of things that need fixing. The most annoying one thus far is definitely switching from webpack-dev-server to webpack-serve due to it's lack of an actual example. So with that in mind, how the heck do I use it?

Using Webpack 4.14.0 and Webpack-Serve 1.0.4.

My webpack.config.js had the following options for webpack-dev-server:

devServer: {
      contentBase: path.join(__dirname, 'public'),
      historyApiFallback: true,
      publicPath: '/dist/'
}

I don't see options for history or public paths just yet, so I suppose I only need the content config option.

So according to the docs I'm supposed to do:

serve({
    content: path.join(__dirname, 'public')
});

But where do I put this? The Github README claims that the most commonly used is to put it webpack.config.js but that seems false because the example also does this:

const serve = require('webpack-serve');
const config = require('./webpack.config.js');

serve({ config });

Do I really import a config file into itself?

I'd appreciate an example. Thanks.

Aaron Chamberlain
  • 653
  • 2
  • 10
  • 26
  • Why do you want to move away from the Webpack dev server? It should work as it did before Webpack 4 with the latest version. – Tholle Jul 03 '18 at 10:04
  • The npm page for webpack-dev-server states that it is in maintenace-mode only, and that users should switch if they don't have to support older browsers. webpack-serve is also faster and additionally, I don't see any new documentation for how to use the required 'mode' webpack flag in webpack-dev-server. webpack-dev-server was in fact working acceptably after going from WP 3 to 4, but I don't want to see warnings about the mode flag if I don't have to. – Aaron Chamberlain Jul 03 '18 at 10:25
  • The documentation states that `Use webpack-serve for a fast alternative.`, not necessarily a replacement. It's in maintenance-mode only because all extra functionality you might want can be implemented as an express middleware. – Tholle Jul 03 '18 at 10:30
  • Then can you indicate how I'm supposed to set the 'mode' flag in webpack-dev-server? – Aaron Chamberlain Jul 03 '18 at 10:41
  • It might be that you have an old version installed. Try `npm i webpack-dev-server@latest` – Tholle Jul 03 '18 at 10:43
  • I am running the latest of webpack-dev-server (3.1.4). Attempted using the --mode development flag but still getting warning. – Aaron Chamberlain Jul 03 '18 at 10:47
  • Set `mode: 'development'` in your `webpack.config.js` in development mode. – Tholle Jul 03 '18 at 10:49

1 Answers1

5

I answered in another question very similar on "how to set up webpack-serve".

For simplicity, I also uploaded the full example to Github

zenoh
  • 2,071
  • 1
  • 22
  • 38