wpwebpack v2.0.3

WPwebpack

Bleeding edge webpack build workflow for WordPress plugins and themes.

Quick start

Install with npx:

npx wpwebpack

or

Install to specific directory

npx wpwebpack -d my-theme

Introduction

WPwebpack is a webpack wrapper designed to be used in WordPress ecosystem. It's main purpose is to compile static assets(stylesheets, scripts, images and fonts) for use in themes or plugins.

TL;DR

• Generates separate css and js files for frontend and admin section
• Enables you to use TypeScript with all the benefits of the language (i.e. module importing)
• Minifies the files
• Optimizes images
• Speeds-up development

Get Started

Check out our quick Get started guide

Features

Some of the things WPwebpack can manage for you.

Styles

• Compile SASS to CSS
• Style linting and error detection (via StyleLint)
• Autoprefixing (via PostCSS)
• Minification (via CSSMinimizer)
• Sourcemaps

JavaScript

• TypeScript to JavaScript transpiling (via Babel)
• Static code analysis and error detection (via ESLint)
• Automatic polyfills (via Browserlist)
• Dynamic code execution (via body-class-router)
• Object-oriented development approach
• Minification (via Terser)

Images

• Automatic optimization of images (via ImageMinimizer)
• Supported file types: .png .jpg .jpeg .gif .svg

Translation

• .pot file generation for translation (via wp-pot)

Development

• A sane-default .editorconfig
• Live reload using BrowserSync
• Hot Module Replacement
• Auto-recompile on save (file watching)

Credits

WPwebpack borrows some ideas and concepts from the following projects:

• roots/sage@9.x - build system organization and general idea
• WPGulp - npx installer