webpack from Kent

These are all of my egghead.io lessons that are about webpack.

Watch User Created Playlist (29)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Intro to Webpack

Webpack Loaders, Source Maps, and ES6

P

Webpack CSS, Preprocessors, and url assets

P

Add a browser build to an npm module

Angular with Webpack - Introduction

Angular with Webpack - Requiring Directives

P

Angular with Webpack - Requiring Templates

P

Angular with Webpack - ES6 with BabelJS

P

Angular with Webpack - Requiring CSS & Preprocessors

P

Angular with Webpack - Testing with Karma, Mocha, and Chai

P

Angular with Webpack - Production Setup

P

Angular with Webpack - Uglifying your JavaScript

P

Angular with Webpack - Production Source Maps

P

Intro to the Production Webpack Course

Validate your Webpack config with webpack-validator

P

Tree shaking with Webpack 2

P

Polyfill Promises for Webpack 2

P

Maintain sane file sizes with webpack code splitting

P

Hashing with Webpack for long term caching

P

Grouping vendor files with the Webpack CommonsChunkPlugin

P

Chunking common modules from multiple apps with the Webpack CommonsChunkPlugin

P

Optimize React size and performance with Webpack production plugins

P

Expose modules to dependencies with Webpack

P

Import a non-ES6 module with Webpack

P

Initialize a Webpack Project with Karma for Testing

P

Use Chai assertions for tests in a Karma project

P

Use Karma for Unit Testing with Webpack

P

Add Code Coverage to tests in a Webpack project

P

Ensure all source files are included in test coverage reports with Webpack

P
js tutorial about Intro to Webpack

Intro to Webpack

4:29 js

Webpack is a module bundler that bundles javascript and other assets for the browser. It works really well for applications and javascript libraries and is very simple frontend build tool.

js tutorial about Webpack Loaders, Source Maps, and ES6

Webpack Loaders, Source Maps, and ES6

5:03 js PRO

Webpack loaders are how you tell webpack to resolve your dependencies and you can use a loader built for the babel transpiler to easily enable ES6 code in your project. Full sourcemap support is also available using webpack's devtool property.

js tutorial about Webpack CSS, Preprocessors, and url assets

Webpack CSS, Preprocessors, and url assets

7:09 js PRO

Webpack enables modularity by allowing you to require the styles needed for a particular component. Adding preprocessors is a breeze and it simplifies the deployment of your css assets.

js tutorial about Add a browser build to an npm module

Add a browser build to an npm module

6:16 js

Currently, our library is being distributed as a CommonJS module, but we should support the browser as well. In this lesson, we're going to use webpack to create a UMD (Universal Module Definition) build of our module so users can consume it in a browser.

angularjs tutorial about Angular with Webpack - Introduction

Angular with Webpack - Introduction

4:20 angularjs

Webpack is a module bundler for the web. It is incredibly powerful and enables modularity in angular applications. This is the first of several lessons to get you up and going with webpack in Angular applications.

angularjs tutorial about Angular with Webpack - Requiring Directives

Angular with Webpack - Requiring Directives

3:48 angularjs PRO

With Webpack and CommonJS, the way you register directives, services, etc. with your modules can be a lot more modular. See how to register a directive with an Angular module using Webpack.

angularjs tutorial about Angular with Webpack - Requiring Templates

Angular with Webpack - Requiring Templates

2:48 angularjs PRO

With Angular, most of the time you're specifying a templateUrl for your directives and states/routes. This means you need to make sure that you're loading in these templates into the $templateCache for your tests and production. Oh, and don't forget to update all your URLs whenever you move the files around! When you add in Webpack and the raw-loader, you don't need to do this anymore. Simply require the html file and your work is done!

angularjs tutorial about Angular with Webpack - ES6 with BabelJS

Angular with Webpack - ES6 with BabelJS

2:43 angularjs PRO

Use the latest features of ECMAScript using BabelJS with Webpack. Simply add the right loader line in your webpack config and everything just works.

angularjs tutorial about Angular with Webpack - Requiring CSS & Preprocessors

Angular with Webpack - Requiring CSS & Preprocessors

6:07 angularjs PRO

Making your CSS modular is a difficult thing to do, but using Webpack makes this so much easier. By adding a single line to your Webpack config, you can require you CSS, Stylus, Less, etc. files right from your directives and keep everything together.

angularjs tutorial about Angular with Webpack - Testing with Karma, Mocha, and Chai

Angular with Webpack - Testing with Karma, Mocha, and Chai

10:22 angularjs PRO

Testing in Angular applications takes a bit of setup. Webpack simplifies things considerably. In this lesson you'll see how to test an Angular application built with Webpack using karma, mocha, and chai.

angularjs tutorial about Angular with Webpack - Production Setup

Angular with Webpack - Production Setup

2:05 angularjs PRO

Using Angular with webpack makes the production build a breeze. Simply alter your webpack configuration at runtime based on an environment variable, and you're good to go.

angularjs tutorial about Angular with Webpack - Uglifying your JavaScript

Angular with Webpack - Uglifying your JavaScript

4:42 angularjs PRO

Angular requires some careful consideration when uglifying your code because of how angular's dependency injection system works. See how easy it is to add this consideration to your webpack configuration so you can minify your Angular JavaScript with Webpack.

angularjs tutorial about Angular with Webpack - Production Source Maps

Angular with Webpack - Production Source Maps

1:51 angularjs PRO

When you uglify your Angular code with Webpack's uglify plugin, debugging your application can be a nightmare. See how easy it is to add source maps to your bundle so you can easily debug even in production.

otherjs tutorial about Intro to the Production Webpack Course

Intro to the Production Webpack Course

2:14 otherjs

There are several lessons that will build on top of this project. It is a fairly standard, small webpack bundled project. In this lesson we’ll explore the project a bit so you’re familiar with how things are set up for future lessons.

otherjs tutorial about Validate your Webpack config with webpack-validator

Validate your Webpack config with webpack-validator

4:06 otherjs PRO

It’s quite common to make a mistake while developing your webpack configuration. A simple typo can cost you hours of development time. With webpack-validator, you can save yourself a ton of time by validating that your webpack configuration is free of common mistakes.

Note: Webpack 2 now has validation baked in.

otherjs tutorial about Tree shaking with Webpack 2

Tree shaking with Webpack 2

3:23 otherjs PRO

The less code you can send to the browser, the better. The concept of tree shaking basically says that if you’re not using some piece of code, then exclude it from the final bundle, even when that piece of code is exported from a module. Because ES6 modules are statically analyzable, Webpack can determine which of your dependencies are used and which are not. In this lesson, see how to take advantage of this awesome feature in Webpack 2.

otherjs tutorial about Polyfill Promises for Webpack 2

Polyfill Promises for Webpack 2

1:59 otherjs PRO

If you're going to use code splitting with Webpack 2, you'll need to make sure the browser has support for the ES6 Promise API. This means that if you are required to support an old browser, you need to provide a polyfill. Polyfilling is relatively trivial to do with Webpack, but because Webpack itself depends on this particular polyfill, you have to come up with another way of doing so. In this lesson, we'll see how we can use the polyfill.io service to automatically polyfill this API (and others) for us.

otherjs tutorial about Maintain sane file sizes with webpack code splitting

Maintain sane file sizes with webpack code splitting

2:38 otherjs PRO

As a Single Page Application grows in size, the size of the payload can become a real problem for performance. In this lesson, learn how to leverage code splitting to easily implement lazy loading for your application to load only the code necessary for a particular feature or functionality.

otherjs tutorial about Hashing with Webpack for long term caching

Hashing with Webpack for long term caching

3:46 otherjs PRO

Leveraging the browser cache is an important part of page load performance. A great way to utilize this cache is by versioning your resources. In this lesson, learn how to use Webpack’s hashing feature so you can take advantage of long term caching of your assets.

otherjs tutorial about Grouping vendor files with the Webpack CommonsChunkPlugin

Grouping vendor files with the Webpack CommonsChunkPlugin

5:36 otherjs PRO

Often, you have dependencies which you rarely change. In these cases, you can leverage the CommonsChunkPlugin to automatically put these modules in a separate bundled file so they can be cached and loaded separately from the rest of your code (leveraging the browser cache much more effectively).

otherjs tutorial about Chunking common modules from multiple apps with the Webpack CommonsChunkPlugin

Chunking common modules from multiple apps with the Webpack CommonsChunkPlugin

4:11 otherjs PRO

If you have a multi-page application (as opposed to a single page app), you’re likely sharing modules between these pages. By chunking these common modules into a single common bundle, you can leverage the browser cache much more powerfully. In this lesson we’ll use webpack’s CommonsChunkPlugin to easily share common modules between apps.

otherjs tutorial about Optimize React size and performance with Webpack production plugins

Optimize React size and performance with Webpack production plugins

5:45 otherjs PRO

You can fine tune several webpack plugins to make your bundle as small as it can be for your specific application. However there are a few things you can do for pretty much every application to make it smaller and run faster. In this lesson we’ll combine several webpack plugins to optimize things for a React application (this is also applicable for non-React applications as well).

otherjs tutorial about Expose modules to dependencies with Webpack

Expose modules to dependencies with Webpack

3:20 otherjs PRO

When you have a dependency that has dependencies on global variables (like jQuery or lodash) or assumes that this is bound to window, you can use the imports-loader to provide those dependencies explicitly.

otherjs tutorial about Import a non-ES6 module with Webpack

Import a non-ES6 module with Webpack

4:20 otherjs PRO

When you have a dependency that does not export itself properly, you can use the exports-loader to force it to export the pieces of the file that you need.

otherjs tutorial about Initialize a Webpack Project with Karma for Testing

Initialize a Webpack Project with Karma for Testing

5:22 otherjs PRO

There are several steps involved with setting up Karma to work on your webpack project. In this first step we'll initialize our karma configuration and setup our package.json scripts.

otherjs tutorial about Use Chai assertions for tests in a Karma project

Use Chai assertions for tests in a Karma project

1:17 otherjs PRO

Chai assertions work great with the Mocha testing framework. In this lesson we'll walk through out to install Chai and karma-chai so you can use the expect assertions in your tests.

otherjs tutorial about Use Karma for Unit Testing with Webpack

Use Karma for Unit Testing with Webpack

4:53 otherjs PRO

When writing tests run by Karma for an application that’s bundled with webpack, it’s easiest to integrate webpack and Karma directly together. In this lesson we’ll see how to utilize the karma-webpack plugin and reuse our existing webpack configuration to preprocess our test files with webpack.

otherjs tutorial about Add Code Coverage to tests in a Webpack project

Add Code Coverage to tests in a Webpack project

6:30 otherjs PRO

How much of your code runs during unit testing is an extremely valuable metric to track. Utilizing code the karma-coverage plugin and babel-plugin-__coverage__ plugin, we can get an accurate measure of how well we’re covering the files that we are testing.

otherjs tutorial about Ensure all source files are included in test coverage reports with Webpack

Ensure all source files are included in test coverage reports with Webpack

4:59 otherjs PRO

If you’re only instrumenting the files in your project that are under test then your code coverage report will be misleading and it will be difficult for you to track or enforce improvements to application coverage over time. In this lesson we’ll learn how to ensure all source files are included in coverage reports and how to enforce a specific threshold so you can work toward improving application code coverage.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?