Webpack-dev-server can be used to quickly develop an application. See the 'How to Develop?' This page describes the options that effect the behavior of webpack-dev-server (short: dev-server). Although webpack-dev-server was released earlier, it has been deprecated as of January 2018 and no more development will be done. As the years progressed, technologies developers used changed for. Webpack-dev-server does not watch for my file changes. Serve public static files with webpack. Moreover, you will use the Webpack Dev Server to serve your project in a local environment with a local web server for development purposes. Last but not least, you need the Webpack CLI as well. Let's install all three dependencies as libraries (node packages) by using npm for your project.
A great feature of Webpack is has a build in webserver for testing your application. It will monitor your files for changes and rebuild. This is similar to watch mode that can be enabled during configuration. However, the dev server expands on that by providing a localhost 8080 port address and automatic refreshing of the view when content changes.
First, install the webpack-dev-server globally
To start the server, navigate to your file directory and type the command:
Webpack Dev Server Header
This will start the server, output should look similar to below.
Now you can navigate to the running site: http://localhost:8080/webpack-dev-server/
Notice the bar that says “app ready”. This is the status bar that webpack has put into the browser. This does have HTML placed on the page using an iFrame. At some point you will not want this on your application, but for simple senario’s this is fine.
To remove the status bar, navigate your browser to the base url (http://localhost:8080/). Downside to this is that now the browser is not automatically refreshed when files are modified. To enable watch mode and auto refreshing on the dev server, specify the inline tag
Now content will automatically refresh without that pesky status bar in the way. Happy web packing!
| { |
| 'version': '0.1.0', |
| 'command': 'npm', |
| 'isShellCommand': true, |
| 'showOutput': 'silent', |
| 'args': ['run'], |
| 'tasks': [{ |
| 'taskName': 'dev', |
| 'isWatching': true, |
| 'isBuildCommand': true, |
| 'problemMatcher': { |
| 'owner': 'webpack', |
| 'severity': 'error', |
| 'fileLocation': 'absolute', |
| 'pattern': [{ |
| 'regexp': 'ERROR in [^ ]* (.*):(.*):(.*)', |
| 'file': 1, |
| 'line': 2, |
| 'column': 3 |
| }, |
| { |
| 'regexp': '.*', |
| 'message': 0 |
| } |
| ], |
| 'watchedTaskBeginsRegExp': 'webpack: bundle is now INVALID.', |
| 'watchedTaskEndsRegExp': 'webpack: bundle is now VALID.' |
| } |
| }] |
| } |