WordPress Plugin Webpack v5 Workflow

This is a modified version of brandonkramer's WordPress Webpack v5 Workflow. All credits goes to him.

Includes WebPack v5, BabelJS v7, BrowserSync v2, PostCSS v8, Autoprefixer, Eslint, Stylelint, SCSS processor, WPPot, a structured config & files, and much more.

Quickstart

1. Run the npm command to get the files
     npm i -D wp-plugin-webpack-configuration
2. Edit the configuration settings in `webpack/project.config.js`
3. Start your npm build workflow with one of these commands:

yarn dev
yarn dev:watch
yarn prod
yarn prod:watch
yarn zip

Read more about the configuration & build scripts

Features & benefits

Styling (CSS)

• Minification in production/zip mode handled by Webpack
• PostCSS for post CSS transformation using Webpack's PostCSS-loader
• Auto-prefixing using PostCSS's autoprefixer to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Alibaba.
• Sourcemaps generation for debugging purposes with various styles of source mapping handled by WebPack
• Stylelint that helps you avoid errors and enforce conventions in your styles. It includes a linting tool for Sass.

Styling when using Sass+PostCSS

• Sass to CSS conversion using Webpack's sass-loader
• Includes Sass magic importer to do lot of fancy things with Sass @import statements

JavaScript

• BabelJS Webpack loader to use next generation Javascript with a BabelJS Configuration file
• Minification in production mode
• Sourcemaps generation for debugging purposes with various styles of source mapping handled by WebPack
• ESLint find and fix problems in your JavaScript code with a linting configuration including configurations and custom rules for WordPress development.
• Prettier for automatic JavaScript / TypeScript code formatting

Images

• ImageMinimizerWebpackPlugin + CopyWebpackPlugin to optimize (compress) all images using
• File types: .png, .jpg, .jpeg, .gif, .svg

Translation

• WP-Pot scans all the files and generates .pot file automatically for i18n and l10n

BrowserSync, Watcher & WebpackBar

• Watch Mode, watches for changes in files to recompile
• File types: .css, .js, .php
• BrowserSync, synchronising browsers, URLs, interactions and code changes across devices and automatically refreshes all the browsers on all devices on changes
• WebPackBar so you can get a real progress bar while development which also includes a profiler

Production Zip file

• Create production ready Zip file
• Include the files and folders of your choice
• Zip file will read the version from the plugin main php file and include it in the zip

Configuration

• All configuration files .prettierrc.js, .eslintrc.js, .stylelintrc.js, babel.config.js, postcss.config.js are organised in a single folder
• The Webpack configuration is divided into 2 environmental config files for the development and production build/environment

Requirements

• Node.js
• NPM
• Yarn

File structure

├── package.json                     # Node.js dependencies & scripts (NPM functions)
├── webpack.config.js                # Holds all the base Webpack configurations
├── webpack                          # Folder that holds config file and sub-config folder
│   ├── project.config.js            # Custom project configuration
│   ├── configs                      # Folder that holds all the sub-config files
│   │   ├── .prettierrc.js           # Configuration for Prettier
│   │   ├── .eslintrc.js             # Configuration for Eslint
│   │   ├── .stylelintrc.js          # Configuration for Stylelint
│   │   ├── babel.config.js          # Configuration for BabelJS
│   │   ├── postcss.config.js        # Configuration for PostCSS
│   │   ├── zip.script.js            # Configuration for building .zip file
│   │   ├── config.base.js           # Base config for Webpack's development & production mode
│   │   ├── config.development.js    # Configuration for Webpack in development mode
│   │   ├── config.production.js     # Configuration for Webpack in production mode
│   │   ├── config.distribution.js   # Configuration for Webpack in production mode and build zip file
├──languages                         # WordPress default language map in Plugins
│   ├── wp-wordpress-webpack.pot     # Boilerplate POT File that gets overwritten by WP-Pot
└──assets
    ├── src                          # Holds all the source files
    │   ├── images                   # Uncompressed images
    │   ├── scss/pcss                # Holds the Sass/PostCSS files
    │   │ ├─ frontend.scss/pcss      # For front-end styling
    │   │ └─ backend.scss/pcss       # For back-end / wp-admin styling
    │   └── js                       # Holds the JS files
    │     ├─ frontend.js             # For front-end scripting
    │     └─ backend.js              # For back-end / wp-admin scripting
    │
    └── public
        ├── images                   # Optimized (compressed) images
        ├── css                      # Compiled CSS files with be generated here
        └── js                       # Compiled JS files with be generated here

What to configure

1. Edit the /webpack/project.config.js with your project data. These settings are pretty self explanatory.
   • Source Directory represents the source css, js & images, Output Directory is where the compiled assets will go.
   • CSS & JS are the names (array) of the respective css & js file names. Note that, if you import css in your js file, no need to include it in the css array.
   • buildIncludes is the list of files & folders you need to copy in production. You must need to include all the files & folders for production.
   • There are also some settings for translations and browserSync.
2. Edit the BrowserSync settings in webpack.config.js which applies to your local/server environment.
   • You can also disable BrowserSync, Eslint & Stylelint in webpack.config.js.
3. The workflow is ready to start, you may want to configure the files in /webpack/configs/ to better suite your needs.

Developing Locally

To work on the project locally (with Eslint, Stylelint & Prettier active), run:

yarn dev

Or run with watcher & browserSync

yarn dev:watch

This will open a browser, watch all files (php, scss, js, etc) and reload the browser when you save.

Building for Production

To create an optimized production build (fully minified CSS & JS files, generate translation .pot file), run:

yarn prod

Or run with watcher & browserSync

yarn prod:watch

Or build a production .zip file

yarn zip

More Scripts/Tasks

# To find problems in your JavaScript code
yarn eslint

# To find fix problems in your JavaScript code
yarn eslint:fix

# To find problems in your sass/css code
yarn stylelint

# To find fix problems in your sass/css code
yarn stylelint:fix

# To make sure files in assets/src/js are formatted
yarn prettier

# To fix and format the js files in assets/src/js
yarn prettier:fix

# To scan for text-domain functions and generate WP POT translation file
yarn translate

WordPress Plugin Webpack Workflow's Changelog

July 03, 2022

• Initial release

Buy Brandonkramer a coffee! :coffee: