We teach the basics of the Webpack development server: webpack-dev-server. It allows us to serve the Javascript and static files and apply live-reload to improve the workflow. Useful configurations for different types of projects.
Another of the basic tasks that we will need to do in web development in general, is to have a server where we can see the web that we are programming. Also, it would be great if that website would update automatically every time we change something in the source files.
Fortunately, having this development server on Webpack is easier than it will be for a monkey to peel a banana. In this article of the Webpack Manual we will explain it to you in detail. I’m sure you’ll be impressed with how quickly you get it done. To do this we’ll use an npm package called webpack-dev-server, which will do the whole job with virtually no configuration required. For this detail alone it is worth using Webpack.
Webpack dev server installation
The first step, as always, will be to install the dependencies via npm. As almost always in the entire workflow with Webpack we will install the dependency in development mode, with the “-D” flag.
npm i -D webpack-dev-server
Note: You could also install webpack-dev-server globally with “npm i -g webpack-dev-server”. This will cause the “webpack-dev-server” command to be installed from any path on your computer, but it usually won’t be necessary. Also, when starting the server the local installation will be used preferably, before the global one. Regardless of this, as we are going to show you below, starting the development server (with an npm script) guarantees that the local installation of webpack-dev-server will be used.
Running the development server
Once installed, we can now use our development server in Webpack. One of the novelties of Webpack 4 is that it is not necessary to configure the development server, since it offers us a default configuration that can be used in many cases.
To get it going let’s first create an npm script. We do this in the package.json, in the “scripts” property.
The set of scripts that we can have in our case could be something like this, although of course it will depend on how you have been configuring Webpack.
“scripts”: { “build”: “webpack –mode production”, “builddev”: “webpack –mode development”, “start”: “webpack-dev-server –mode development –open” },
The specific script that starts the Webpack Dev Server is the “start”. In it we are indicating:
- That the working mode is “development” (configured with “–mode development”. It also allows the “production” mode).
- That the default browser opens automatically, with the web that we are developing (configured with –open).
To open the server we have to run the script we just made. We do this from the terminal, with the command:
npm runstart
As we have configured with –open the start of the server, the browser will open automatically, showing the web that we are making. Also, this development server is automatically configured with live-reload (more info later).
Note: As an alternative to npm scripts, if you want to make sure the local version of webpack-dev-server is running, you can run the command: “node_modules/.bin/webpack-dev-server” (from your project root)
Once the webpack dev server is started the terminal window will remain open, showing any Webpack activity in relation to the project. For example, if the source files are updated, the result of compiling these new files will be displayed. The terminal window will remain busy with this watcher and we will not be able to operate to launch new commands. Obviously, it’s not a problem because we can always launch new terminal windows, but if we want to stop the server it’s as simple as pressing CTRL + C.
Relevant details of using Webpack-dev-server
Next we are going to give some interesting details about this Webpack plugin, which may come in handy during the development stage of your project.
Configuration with Live reload
This server is initially configured with the live reloading system, which allows each time the Webpack “source” files are changed and saved, the browser is automatically reloaded, showing the web with the recent modifications. This utility speeds up the development process, but above all it allows for a much more pleasant development experience for the developer.
To test it, simply change anything in your Javascript file, in your CSS, in your template HTML… simply saving the file in your editor will update the project in the browser, showing the changes made immediately, without having to reload and without the browser cache bothering us, displaying old code.
Automatic transpiling of development files
Note that webpack-dev-server performs automatic transpiling of the files. This is helpful in most cases, as the web you are developing can be displayed correctly in browsers that support ES6 and ES5. By default transpiling will be done to support the last two major browser versions.
Change development server port
Sometimes it may be necessary to change the port on which the development server boots. This can be configured in the server startup command, with the “–port” flag, followed by a blank space and the port number you want to use.
For example, if you use npm scripts as we have explained, the “start” script could look like this:
“start”: “webpack-dev-server –mode development –open –port 8888”
Configuring webpack-dev-server from webpack.config.js
If we need to do some detailed configuration of webpack-dev-server it is also possible to do it from the webpack.config.js configuration file.
In that file, where the configuration JSON is located, just as we have a property for “plugins”, “output”, “module”, etc., we can place another one precisely to define the configuration object for starting our server. developing.
For example, the webpack-dev-server startup port could also be defined from the Webpack configuration file, with the following property.
devServer: { port: 9001 }
serve static content
Another very useful configuration, and necessary in many cases for the development server, is to indicate the folder where we have the static content. As static content we can find any file that is not processed by Webpack but that we want to be delivered by the development server as well.
For example, we can have images that we want to be served as is (we are not referring to images that Webpack has processed to optimize, but images that we have in our project and that the development server has to show as well), or for example a file Static JSON that we want to read from our application in the development phase.
Well, in the Webpack configuration we could tell it that a certain folder must also be available from the development server. To do this we use the “contentBase” property, like this:
devServer: { port: 9001, contentBase: path.join(__dirname, ‘publicdocs’) }
Configuration example to serve static images
To illustrate this point we are going to see a concrete example, which allows us to clarify possible doubts. Imagine you have a folder called “public” in the root of your project. In it, in turn, we find a folder called “images” that contains several images that you want to serve. You have not processed those images via Webpack, but you have created them with your favorite editor and saved them in your folder. The folder structure might look something like this:
Then you could configure Webpack, in webpack.config.js or in the corresponding configuration file that you are using, to serve those images. In a way similar to this:
module.exports = { entry: { main: ‘./src/js/index.js’, }, devServer: { contentBase: path.join(__dirname, ‘public’) } }
Note: There is obviously a lot of configuration missing from this file. What we are interested in is the “devServer” and “contentBase” property, so we have removed most of the configuration code to avoid misleading. We have only left “entry” so that it is better seen at the level where we must place the “devServer” property.
Now, imagine that inside “images” you have a file called “my_image.png”. So, the path where you will find this file will be the following:
http://localhost:8080/images/my_image.png
Using webpack-dev-server in conjunction with another server like Apache or Nginx
With Webpack we can configure the flow of the project for both application development and website development. Consider for a moment that you are working with a PHP site and that you need Apache to serve and process the PHP pages. In this case the Webpack development server could not help you at all, since it does not execute the PHP code. You will have to start your project with Apache and launch Webpack-dev-server to simply process the Javascript for you. This is also possible
In this case, the work with Webpack-dev-server is practically the same, we simply have to make sure that on the website that you have with PHP you load the code that webpack-dev-server offers you. For this we are going to need Apache or Nginx started, as well as the Webpack development server. In the path of the scripts that you upload to your website you will use the URL provided by Webpack.
Here you will have to do some configuration of the script path by reading environment variables, to know if you are on the development server or in production, because the paths of the scripts will be different depending on the case. To know more consult the article.
Fix cors errors
The only problem with this setup will be that your website will be on a different server than your Javascript and so you don’t get cors errors you have to do a little configuration.
Maybe the cors errors don’t appear at first, but at some point you may find that your scripts don’t work for you and the browser throws you an error that mentions “Cross-Origin Request Blocked…”. In short, you can solve them with the corresponding HTTP headers included by webpack-dev-server.
devServer: { port: 9001, headers: { “Access-Control-Allow-Origin”: “*” }, },
Set the source maps
There is another topic that you must have, yes or yes, to improve your development flow. They are the source-maps. These allow you to receive Javascript errors in the…
Facebook Comments
Disqus