Webpack config for LivePreso Content Development

How does it work?

Two plugins live at the heart of this project

LivePresoProjectPlugin

This reads your project.yaml file and automatically generates base index.html files in a structure the LivePreso servers expect. For example if your project.yaml has the following:

key: test_section_1
title: 'Test Section 1'
slides:
	- {key: 'test_slide_1', title: 'Test Slide 1'}
	- {key: 'test_slide_2', title: 'Test Slide 2'}

Then the output would look like the following:

sections
└── test_section_1
		├── index.html
		└── slides
				├── test_slide_1
				│   └── index.html
				└── test_slide_2
						└── index.html

This can be found in plugins/project.js and could be included manually in your webpack config like so:

const { ProjectPlugin } = require("@livepreso/webpack");

module.exports = {
	plugins: {
		new ProjectPlugin()
	}
}

Postcss Prefixer

This is a postcss plugin that is used to prevent bleeding of global styles from affecting elements outside of the presentation. Essentially it adds #slideshow to the start of most styles.

It could be manually added to your config like so:

const { LivePresoPostCSSPrefixer } = require("@livepreso/webpack-deck");

// In your webpack rules...
rules: [
	{
		test: /\.s[ac]ss/i,
		use: [
			"css-loader",
			{
				loader: "postcss-loader",
				options: {
					postcssOptions: {
						plugins: [LivePresoPostCSSPrefixer],
					},
				},
			},
			"sass-loader",
		],
	},
],