Last Updated on March 4, 2020 by Neil Murray

DEVELOPMENT #

webpack #

• webpack Documentation
  • Optimization
  • SplitChunksPlugin
  • CommonsChunkPlugin
  • Code Splitting
  • Dynamic Imports
  • Authoring Libraries
  • Example – multi-part-library

webpack Tools #

• createapp.dev – create a webpack config in your browser
• Awesome Webpack – a curated list of awesome Webpack resources, libraries, tools and applications

Code Splitting #

Impress Your Friends With Code Splitting in React
Vendor and code splitting in webpack 2
Straightforward code splitting with React and Webpack
Advanced WebPack Part 2 – Code Splitting
Formidable Playbook – Code Splitting

CommonsChunkPlugin #

Replaced by SplitChunksPlugin in webpack v4

• CommonsChunkPlugin – webpack Documentation
• How to bundle vendor scripts separately and require them as needed with Webpack?
• webpack bits: Getting the most out of the CommonsChunkPlugin()

Create React App #

• Create React App
• Create React App – Docmentation

Avoid ejecting Create React App #

• Don’t eject your Create React App
• Options:
  • react-app-rewired
  • Rescripts – advanced CRA configs without the pain

LEARN #

Tutorials #

• Webpack 4 course – RECOMMENDED
• A beginner’s guide to Webpack 2 – RECOMMENDED
• webpack – Basic
• webpack – Advanced
• Beginner’s guide to Webpack
• Configuring Webpack in WordPress for the First Time
• Getting started with Webpack: Source Maps

Articles #

Versatile Webpack configurations for your React application
Using Webpack with Create React App
Fast and modern front-end setup with webpack, react etc.
Modern approach of JavaScript bundling with Webpack
webpack – The Confusing Parts
Using React with Webpack

Slides #

Better Webpack Builds

Repositories #

react-wp-scripts – a wrapper for create-react-app’s react-scripts to suit WordPress environment

This project solves two issues that prevent seamless usage of Webpack projects in WordPress themes and plugins:

1. WordPress doesn’t necessarily know where to look for the output bundles.
2. WordPress cannot access the development server due to cross-origin restrictions.

create-guten-block – a zero-configuration #0CJS developer toolkit for building WordPress Gutenberg block plugins

Why create-guten-block?

Well, it’s really hard to configure things like Webpack, React, ES 6/7/8/Next, ESLint, Babel, etc. before you even start writing a Hello World gutenberg block. Then there’s the fact that you have to maintain and constantly update your configuration with all the new tools and growth in the JavaScript community.

create-guten-block hides all this configuration away in an optimized package that we call cgb-scripts. This package is the only dependency in your projects. We keep cgb-scripts up to date while you go ahead and create the next best WordPress themes and plugins.

Peer Dependencies

Peer Dependencies – no longer necessary