Welcome to Part 1 of this review of the Pluralsight course Webpack Fundamentals by Joe Eames.
Joe has worked both full and part time as a technical teacher for over ten years.
Also in this series:
Make sure you look at
At the time of writing, this page shows that the course is out of date, and what you need to know to workaround that.
The Need for a Build
- Multiple web requests
- Code size and the benefits of minification
- File Order Dependencies
Joe discusses other solutions and their limitations
- Server-Side Tools (e.g. ASP.NET and Rails)
- Task Runners (e.g. Grunt and Gulp with Browserify)
The Webpack Solution
We see an example of a simple application and its dependencies. Joe discusses the need to avoid circular dependencies,
and determining the correct order in which the files are loaded.
Module systems solve these problems and Webpack requires that you use a module system.
Basic Builds with Webpack
How to install and use webpack from the command line. Install Node first, then use:
npm install webpack -g
In this clip we use webpack without the aid of any config file, which works fine for very simple programs.
We see the outputted file that webpack has created for us.
Adding a Config File
We add a very simple config file, and see that it works.
Watch Mode and the Webpack Dev Server
We don’t want to have to type the webpack command every time that we make a small code change. There are two solutions to this.
On the command line:
Add watch to the config file. Joe shows how to do this.
Also covered in this clip is the webpack dev server. We see the browser automatically refreshed each time we save.
Joe also shows the effect of webpack-dev-server –inline
Building Multiple Files
In this demo, Joe shows a project with the following files:
login.js is just console.log(‘login loaded’); for illustration
In app.js we see CommonJS code to ask for this to be loaded prior to app.js
Joe explains utils.js represents a 3rd party library such as a jquery plugin.
We don’t want to require utils.js in from every single file that is dependent on it.
Joe shows how to update the entry field in your webpack.config.js to include utils.js
Loaders allow us to process files and potentially transform them into something else.
Joe adds a package.json file to the project, and within it is a number of devDependencies:
Using package.json, we can just type “npm install” and npm will install all of these packages for us automatically.
Joe renames a file to the .es6 extension and writes ES2015 code in it (let keyword, arrow function)
To get this to work, we see how to update the webpack.config.js module loaders section to use Babel JS.
Using this setup we can be entirely selective about which files we want Babel to run against.
We also see what to add to the resolve section on our webpack.config.js
We can also include a module preloaders section in our config. We can use this section for setting up Linting. Joe sets up the JS Hint linter.
This also requires a .jshintrc file
Creating a Start Script
Webpack is typically a replacement for task runners such as Grunt and Gulp.
Joe explains how webpack works with NPM scripts, and shows us a test NPM script.
Production vs. Dev Builds
Joe explains the need for separate configs for each environment.
We can use the webpack -p command to force a production build.
Joe installs Yahoo’s strip-loader using npm and –savedev, and shows us that our package.json is automatically updated.
He shows us how to avoid duplicated code when creating separate config files for each environment.
The great thing about object literals is that they are just objects, so we can copy them, update them, and insert into them as we like.
We see that we can use the strip-loader to remove our console.log statements and performance logging from our production build.
Joe runs this with the http-server node module