Webpack-dev-server: Minimalize differences between CLI and Node.js API and move CLI in `webpack-cli`

[SpaceK33z]

There are some differences between the CLI and Node.js API that make webpack-dev-server a lot harder to use for people. Most differences are documented in the wiki, but users often don't look at this. They also shouldn't have to.

The first problem is that the CLI in inline modus (which is the default since v2), automatically adds an entry to the webpack config. When you use the API, you need to do this manually. What makes it more confusing is that there is is a inline option, but that only has effect when using the CLI.

The second problem is that, when using --hot, the CLI adds an entry to the webpack config _and_ adds the HotModuleReplacementPlugin. In the API, you need to add those two things yourself, as well as set hot: true.

The idea was that the API shouldn't mutate the webpack config. This is indeed iffy, but perhaps there are other ways to do this without mutating the config. Or if there is not, maybe it's worth it to mutate the config? The current situation causes many issues with users.

Related to #106, but that discussion is quite old and not all points are valid anymore.

cc @bebraw

[axe312ger]

You marked it for version 3. Might it be possible to earlier make more clear what the CLI attaches/changes at the configuration?

Still have issues with public path, my webpack config works fine with CLI but not with the Node API :(

[SpaceK33z]

@axe312ger, #615 will introduce config validation. Feel free to join that discussion if you have more ideas for validation. We're also working on better docs, which will be released with v2.

[alecmev]

This definitely needs to be addressed.

For example, look at the official docs on React + HMR and the react-hot-boilerplate: both load the WDS client twice. This means that even those intimate with Webpack don't have full understanding of the difference between CLI and Node API.

Also, speaking of config differences, I can see people starting out with CLI and then switching to programmatic use, doing something like new WebpackDevServer(compiler, webpackConfig.devServer), and then not understanding why the client isn't being inlined. Or vice versa, going to CLI and not understanding why the client is being inlined twice (or not even noticing it).

[wesleymostien]

any progress ?

[shellscape]

@wesleymostien none yet. this is planned for the v3 work. protip: if there were commits against this issue/task, you'd see github list those referenced commits in this issue along with the comments - they make it easy to know if there's been progress without having to post follow-up comments 😄

[the-spyke]

I've tried to run WDS from my own CLI, but I can't make it behave the same way as running the binary directly. Using the examples/api/simple/ with my regular config file doesn't give me page reloading, etc. I'd also like to see console output I got used to: host, history api, etc. But bin/webpack-dev-server.js is doing too much work. It will be cool to extract processOptions() and startDevServer() into separate file(s), so anybody can reuse them. The only logic left in the actual binary will be argv parsing.

[obedm503]

994 is still an issue, lack of uniformity between cli and node api is a huge issue for webpack noobs like me

[SpaceK33z]

Please, feel free to do some nice works and time for it.

[alexander-akait]

We should move CLI logic to webpack-cli (we need discussion how better do this). Ideas:

• Allow package define own command in webpack-cli
• Remove out bin and add message about using webpack serve instead webpack-dev-server bin

Feel free to discussion

[daKuleMune]

So after hours and lots of comment reading here is what I found.
output.publicPath must be set.
if the plugin is enabled you will get 404 from hot/hot-update, so rather you must set.
output.hotUpdateChunkFilename = 'hot/hot-update.js';
output.hotUpdateMainFilename = 'hot/hot-update.json';
But if you do this and add the plugin you will blow the stack, due to an infinite loop.
Any every entry must have [ "webpack-dev-server/client?http://host:port", 'webpack/hot/dev-server', file ], because addDevServerEntrypoints doesn't do anything.

This is my minimal config modifier that makes it work with a existing build config. But yeah way to many differences and not in open place. Because there are a lot of moving parts when you add in HMR.

```const webpack = require('webpack');
const WebpackDevServer = require( "webpack-dev-server" );

webpackConfig = [ ...configs ];
config.forEach( webpackConfig => {
webpackConfig.output.publicPath = "http://localhost:8000/";
webpackConfig.output.hotUpdateChunkFilename = 'hot/hot-update.js';
webpackConfig.output.hotUpdateMainFilename = 'hot/hot-update.json';
for( let entryName in webpackConfig.entry ){
webpackConfig.entry[entryName] = [ "webpack-dev-server/client?http://localhost:8000", 'webpack/hot/dev-server', webpackConfig.entry[entryName] ];
}
} );
const devServerOptions = {
public: "localhost:8000",
contentBase: "./public/",
headers : {
"Access-Control-Allow-Origin" : "*"
},
inline: true,
hot: true,
port: 8000,
disableHostCheck : true,
host: '0.0.0.0',
stats: {
colors: true
}
};
const compiler = webpack( config );
const server = new WebpackDevServer( compiler, devServerOptions );

server.listen( 8000, '0.0.0.0', () => {
console.info( UI Dev server started on http://localhost:8000/ );
});```

[alexander-akait]

@navstev0 Can you create minimum reproducible test repo

[daKuleMune]

Sure I will do that later tonight.

[alexander-akait]

Close in favor #1960