webpack is a tool to build JavaScript modules in your application. To start using webpack from its cli or api, follow the Installation instructions. webpack simplifies your workflow by quickly constructing a dependency graph of your application and bundling them in the right order. webpack can be configured to customise optimisations to your code, to split vendor/css/js code for production, run a development server that hot-reloads your code without page refresh and many such cool features.

webpack

Learn Webpack

Building an application with React typically involves several tools. Whether you configure these on your own or use a tool meant to save you from the configuration like Create React App, the tools are still there. When you come up against a situation where you need to start from scratch or make changes to a webpack or babel configuration, it helps to understand what each tool does, how they fit together, and how they are configured. 

In this course, we’ll start from an empty directory and by the end, we will have configured a slim but powerful boilerplate project. Along the way, we’ll touch on each of the major tools and build up to the final setup to gain an understanding of each tool’s purpose and how they all work together to help you build and deliver an application.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Modern JavaScript Tooling with React

When setting up a modern JavaScript app, we find ourselves trudging through the land of infinite configuration. Poi offers us an option of zero-configuration by providing sane defaults and hiding them away until you need to tweak a change to suit your needs.

Make Webpack Easy with Poi

How much work would it take for you to move all of your directives and their templates to several different new directories? You'd have to update the templateUrl, script tags, etc., etc. With webpack, this can be trivial. For example, you don't need to worry about loading your templates in the $templateCache ever again. Webpack will help you modularize your css and tests. All of these things and more in this series so you can start using webpack with Angular today.

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

AngularJS and Webpack for Modular Applications

NW.js is an app runtime based on `Chromium` and `node.js`. You can write native apps in HTML and JavaScript with NW.js. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies.

nwjs

Let's add some module loading to our NW.js. Webpack and dependency management FTW!

NW.js and Webpack: A match made in heaven

Babel 6 was a major change in how Babel works and is configured. In this lesson, find out how to update this Angular application built with Webpack to use Babel 6.

For more information about how modules have changed in Babel 6, see [this blogpost](https://medium.com/@kentcdodds/misunderstanding-es6-modules-upgrading-babel-tears-and-a-solution-ad2d5ab93ce0) by Kent.

Updating Babel 5 to 6

Poi can easily launch an `index.js` file simply by running the `poi` command. This will launch a dev-server and automatically reload whenever you make changes. You can also `npm install` any package you need and `import` it right away.

Use Poi to Build an Index.js with Modern JavaScript Features

Poi ships with a sensible default for an index.html template, but it’s easy to override to customize and provide whatever you may need. You can change the title, update `links`, and even use the underscore templating system.

Customize Poi's Default index.html Template

Poi uses the `ejs` templating language for the main template. When you create a `poi.config.js`, you can customize how to render the main template using configuration settings.

Configure Poi for Advanced Template Control

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Poi uses the Vue babel presets by default, so there is no additional install required to get up-and-running. You can even use the `.vue` file format without having to configure anything.

Build a Vue App with Poi

Developing React with Poi is as easy as adding the `babel-preset-react-app` to a .babelrc and installing React. This lesson will walk you through that quick process and get your React app up-and-running.

Customize Babel to Build a React App with Poi

Poi uses sensible defaults for importing `.css` files. Sass isn't included by default, but simply installing the required packages gets you up-and-running. This lesson walks you through importing `css` and `scss` files into your project.

Compile CSS or Sass with Poi

Poi ships with many webpack loaders included, but you may run into scenarios where you'll need to customize and add your own. This lesson covers adding `react-markdown-loader` to Poi to load Markdown files as React components.

Use Markdown as React Components by Adding a Webpack Loader to Poi

Ever wonder where those extra KB in your bundle are coming from? This lesson walks you through running Poi's build process. Then we'll add a bundle analyzer to find where you may be able to trim down on your file size.

Build and Analyze Your JavaScript Bundles with Poi

You can easily spend hours configuring the perfect dev environment with all the latest hotness like ES6 (and beyond) support, hot reloading, and a myriad of other features. This lesson shows how to use hjs-webpack to get the same thing in a matter of minutes.

Set up a killer React dev environment quickly with hjs-webpack

An introduction on unit testing a ReactJS component using Webpack and Jasmine. Learn how to use Webpack to package and import dependencies plus take advantage of the babel-loader to write a simple Jasmine spec using the latest ES6 syntax.

Unit testing a React component using Jasmine and Webpack

Testing your sites on mobile devices is a critical part of the development process. Webpack dev server enables you to visit the server from any device using the `host` option. This lesson walks you through accessing webpack dev server using an iPhone.

Access Webpack Dev Server from Mobile Safari on an iPhone

Learn how to use the new <a href="https://github.com/FormidableLabs/webpack-dashboard">Webpack Dashboard</a> from <a href="https://formidable.com/blog/2016/08/15/introducing-webpack-dashboard/">Formidable Labs</a> to display a pretty, useful output for monitoring the status of your webpack builds. This command line tool replaces the frequently unhelpful large text dump that webpack generates with a pretty user interface that breaks out useful information and presents it in a way that's easy to understand at a glance.

Use the Webpack Dashboard to Monitor Webpack Operations

Unit testing a React component using Webpack and Jasmine, can involve slow and repetitive tasks when confirming that tests are passing when your code changes. For example, manually running commands instructing webpack to compile code plus refreshing the browser. This lesson demonstrates how to speed up your development time by automating these tasks using webpack-dev-server.

Reloading React component tests using webpack-dev-server

Great improvements and optimizations can be made to the output of bundled code. Prepack provides the ability to optimize code at build-time, producing run-time optimizations. In this lesson, we will look at configuring Prepack to use Webpack with the Prepack Webpack Plugin so we can enjoy extremely concise and optimized build scripts within our Webpack project.

Configure Prepack with Webpack

We’ll make the webpack configuration changes needed to get universal components working. We'll go from a typical webpack configuration to a "universal" webpack configuration. We'll need two webpack configs—one for the client and one for the server. Each config needs several specific changes to be made to get universal working.

Configure Webpack to Work with React Universal Component

Poi provides a helpful list of presets for popular libraries which you can simply npm install and use with the `poi --presets` flag. By default, Poi uses a built-in Vue preset, but you can leverage he presets to help you try out new libraries such as Svelte, Riot, and Elm.

Topics

Instructors

Content Type