-
Optimize your build process with webpack. Learn the basics of transforming, bundling, and processing JavaScript and CSS files with this versatile module bundler.
webpack is the latest and greatest addition to a front-end developer's toolset. It is a module bundler suitable for the largest single-page web applications, and it can process JavaScript, CSS, and more.
Learn the basics of transforming, bundling, and processing JavaScript modules and other web assets with webpack, in this introductory course with Eve Porcello. Discover how to install webpack, run a build, and edit the config file. Find out how to use loaders to run tasks and process files such as CSS, Sass, and inline images. Eve then demos on-demand code splitting with webpack, which allows your code to run faster and more efficiently. In addition, learn how to set up a webpack-dev-server to serve and reload files in real time as you make changes.
Overview
Syllabus
-
Introduction
- Welcome
- What you should already know
- Using the exercise files
- What is webpack?
- Installing webpack
- Running a webpack build
- Understanding the webpack.config file
- What is a loader?
- Setting up babel-loader for a React or ES6 project
- Using presets
- Setting up coffee-loader for CoffeeScript projects
- Why load CSS with webpack?
- Transpiling Sass with webpack
- Loading images with webpack
- What is code splitting?
- Adding multiple entry points
- Using the commons chunk bundle
- Bundling vendor files
- What is the webpack-dev-server?
- Setting up the webpack-dev-server
- Next steps
