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

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.

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

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.

react

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

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.

Use Poi Presets from npm to Skip Configuration

This lesson walks through setting up a Poi project using PostCSS and the popular Tailwind library for building out your styles. Poi supports PostCSS out of the box, but to show the true power of PostCSS, you need leverage PostCSS plugins which requires its own bit of setup.

Make Webpack Easy with Poi

John Lindquist

Course Content