Developers want to move fast. ? ? ? Manually triggering a rebuild of your source code after ever little change is slow and annoying. With the WebpackDev Server and Webpack watch we can greatly improve our code, build, try cycles. We'll use the existing code from the Getting Started with Webpack: TypeScript blog post as a starting point.
For this guide we'll be using Node v8.5, NPM v5.5, TypeScript v2.5, and Webpack v3.8. The following commands will tell you which versions you have installed. If they are not exact they may still work. TypeScript and Webpack will be installed a little further on.
DevServer webpack-dev-server can be used to quickly develop an application. See the development guide to get started. This page describes the options that affect the behavior of webpack-dev-server (short: dev-server). Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
You might notice that Webpack is at a different version than the previous blog post. They are constantly adding features and fixing bugs so they release pretty often. The easy way to update your dependancies is with
npm update
from within the application directory.Currently we have the command
npm run build
to compile our code and npm run serve
to run a development server on http://localhost:8080
. Every time you make a change to the source code you have to manually execute npm run build
. Let's simplify this so that you just have npm run serve
and build will automatically run when code changes.The first step is to get builds happening automatically when code changes. With Webpack that's quite easy to accomplish with the
--watch
flag. Update the package.json
to have a new watch
script.Now if you run
npm run watch
you'll notice that the command never ends. That's because Webpack is 'watching' your source code for changes.Why not update
build
to include --watch
? Sometimes you want to run a one-off build and if you combine them you have to start the watch, let it build once, and then close it.If you make a change to
index.ts
and save the file you'll see the file get built again.To get an initial combined command is actually very easy. Change the
serve
script command to look like the following. The single &
will tell most systems to run the command before and after it in parallel.You can run a single command
npm run serve
and Webpack will be watching for and recompiling code changes in one thread and http-server
will be serving those results in another thread. One downside to this is that both TypeScript compilation messages and http-server messages will mix with each other in the output.You could leave the setup like this but moving to the Webpack Dev Server will enable some pretty hot features we'll cover in future blog posts so let's go ahead and do that now.
Add the
webpack-dev-server
package.You'll need to tell the Dev Server what to serve. Currently we are serving the
index.html
file from the root of the directory.Next update the
package.json
serve
command again, this time to use the new Dev Server.Note the
--open
flag, this will tell Webpack to open the site in a browser window.It's so much work ?? though to have to still reload the site in the browser every time you make a change. Let's kick it up a notch and add some Hot Module Replacement #magic ?. You'll need the
html-webpack-plugin
module installed first.To enable HMR make a couple of changes to
webpack.config.js
.Require the needed packages:
Webpack-dev-server Watch
Enable
hot
for the devServer
:Webpack Dev Server Invalid Host Header
Add three plugins: https://oblasana1978.wixsite.com/goodsoft/post/epson-t60-adjustment-program-software-free-download.
HotModuleReplacementPlugin
just says 'hey, use the new hotness' and NamedModulesPlugin
cleans up the build logs to only show the entry points we define.HtmlWebpackPlugin
is a little more interesting. It will take the template
file that is scoped to the root of the directory and output it to the filename
within the dist
directory. The main reason for this is so that Webpack can automatically add the compiled <script>
tags required for HMR.The final change is to remove
<script defer src='dist/bundle.js'></script>
from the index.html
in the root directory. Since Webpack is now adding that automatically we don't want it included multiple times.? Now you can write code, save it, and Webpack will push the changes to the browser without you ever having to leave the editor.
You can view the source for the progress so far on GitHub and check out the next article Getting started with Webpack: Source Maps.