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

Customize Poi's Default index.html Template

Configure Poi for Advanced Template Control

Build a Vue App with Poi

Customize Babel to Build a React App with Poi

Compile CSS or Sass with Poi

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

Build and Analyze Your JavaScript Bundles with Poi

Use Poi Presets from npm to Skip Configuration

Setup PostCSS and Tailwind with Poi

Make Webpack Easy with Poi

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.

https://app.egghead.io/api/v1/lessons/webpack-configure-poi-for-advanced-template-control/subtitles

Instructor: [00:01] For more customization options for your template, create a poi.config.js. This has the usual module.exports. There's an HTML property on here that we can use.

[00:13] First, we'll just try title and call it My amazing app, then start up Poi again. You can see it will grab My amazing app and drop it in the title. Other common options like description, My description, these options are also available. You'll see the description show up in here.

[00:33] For more customization options, we'll need to tell it exactly what our template is. We're just going to use the template we're already using. Then we can start passing in custom properties into the template. I'll call this one Course. The course can be Poi lessons. When I hop into my template, I can create an <h1>.

[00:54] Using the template's syntax for Underscore and Lodash, I can access the htmlWebpackPlugin.options.course. Course is coming from right here. We changed some configurations, so we need to reboot Poi. You can see Poi lessons shows up here coming from the configuration.

[01:20] Another example could be something like contributors, where we have Mindy and John. Then we could access these in here. Let's simplify this a little bit by destructuring the options. We'll say Course, and grab the course and contributors off of htmlWebpackPlugin.options. That way, we can just have Course here.

[01:50] Then we can create an unordered list with some list elements. We'll wrap this with the template syntax for using Underscore or Lodash, say, for each contributors. We'll call each contributor a c with an arrow function and an open curly here. Then we'll close this on this line with a closed curly and a closed paren.

[02:15] Inside of my list element, I can get the local variable syntax and say render out the c. I'll hit save. You can see that Mindy and John are coming into the template from the config Mindy and John.

[02:31] You shouldn't use this for anything more than configuration or global configuration for your project. Leave any dynamic data or data of your application in your JavaScript instead of your HTML template.

Configure Poi for Advanced Template Control

Share this video with your friends

Course

Make Webpack Easy with Poi