Webpack’s documentation is very good, but I wanted to document a very simple few steps to setting up Webpack, as a light introduction for those who want to see what it does before jumping in.
I prefer to use yarn over npm as I personally find it easier and more reliable. In most casts yarn & npm are interchangeable.
Create a new directory for your app and initialize it. Yarn will ask you some questions, which you can leave as the default by pressing `return` for each.
Next, install webpack, plus webpack’s CLI. These are added with the --dev flag as they are only needed for development, they aren’t modules needed for your application once it is built.
yarn add --dev webpack webpack-cli
In your directory create 2 empty folders:
/src: contains the source files that webpack will build from.
/dist : where the code will be built to.
Webpack is configured by a JSON file, which you need to create. For this demo create a new file called
webpack.config.js in your directory.
A little about the contents of this:
entry: define the starting point for webpack to go looking for your code, which can be either in that file or linked to it (e.g. using require()).
output: This defines the path and filename that all your code will be compiled to.
Let’s create our
/src/index.js file, as simply as we can:
We’ll create a simple HTML file in our
Building your code 2 different ways
To build your code you can use the command line that you have open in your directory to trigger the default webpack process:
Once that completes, open your
/dist/ folder and you should see a
bundle.jsfile in there. Open the
index.html file in a browser, open the console, and you should see “Hello World” appear.
As webpack’s build function can run with several options, we usually create a shortcut in the
package.json file by adding a script function to
package.json, (don’t forgetting to add a comma before or after to keep it a valid JSON file):
"build": "webpack --mode production"
This doesn’t do much for now but as you develop more complex builds it can simplify your workflow a lot. To build your code you can now also use the command:
Hot Reloading Development Server
When you are coding your app you don’t want to have to build it after every code amend in order to test it. Webpack comes packaged with the ability to run a local development server from your directory, which will trigger a rebuild every time it detects an updated file.
To install the development server run:
yarn add --dev webpack-dev-server
package.json add a new property to the “scripts” object:
"dev": "webpack-dev-server --open --hot"
package.json file should now look something like:
At the command line you can now run:
This will start a local server and open your default browser, showing your working directory. Yarn will tell you the URL and output directory in case your browser doesn’t open. In our example, the output directory is
/dist/ so click on that in the browser and our index.html page will load, with Hello World showing in the browser.
Now go to
/src/index.js and edit your Hello World content. Once you save your file go back to the browser and in the console you will see that your changes have been reflected there. As long as the server is running, any changes to your content files will be reflected there.
To stop the server, Windows users press Ctrl+C twice in the command line window running the server.