Wpack.io is a fine-tuned webpack/browser-sync configuration made specifically for WordPress Theme and Plugin Development. It gives a fine Developer Experience (DX) and a single dev dependency for all your javascript and css/sass/scss bundling requirements. Webpack is an awesome tool to improve front-end development workflow, but, sometimes, it can be tricky to set it up for a certain project type. How about connecting it to the most famous CMS in the. Adding webpack to your WordPress theme In this course I’ll walk you through the process of adding webpack to your WordPress theme. We’ll cover how to setup your various loaders for your JavaScript, CSS (using postcss) as well as Vue single file components. Webpack has given me access to a lot of useful tools, so I’ve put together a boilerplate WordPress theme which can be used as a starting point for new projects. I’ve released it on GitHub, and here I’ll take you through the different parts.
Asset bundlers are an important part of any modern front-end workflow. With the ubiquity of CSS pre-processors and JS-centric apps, UX developers need a simple but customizable solution for compiling, minifying, linting, and optimizing bundled source files. Past alternatives for most people probably included GUI apps like CodeKit or task runners like Grunt or Gulp. Since 2016 however, Webpack has emerged as one of the most powerful, extensible and popular asset bundlers.
Webpack comes with features like minification and code splitting out of the box. This makes it an appealing choice for WordPress theme developers who want to keep their enqueued assets lean. This tutorial will walk you through the basics of how to add webpack to your next theme and customize the config. (To just view a diff of the changes outlined here, check out this pull request.)
1. Start with a copy of Underscores
For this tutorial we’re going to use a copy of underscores, a bare-bones starter theme from Automattic. Jayski twitter. You can clone underscores from the Automattic GitHub repo and do a find & replace to update the project namespaces, or you can download a copy from underscores.me, and select the “_sassify!” option behind the “Advanced Options” toggle.
2. Prerequisites: Node.js & NPM
Ensure you have up to date versions of Node.js and npm installed. Most front-end developers probably took care of this when they set up their dev environment, but for those of you who are new to the command line, you’ll want to download an installer here. If you’ve completed this step successfully, you should see results similar to these in your terminal:
3. Add a package.json file
To work with npm and keep your project dependencies organized, you’ll want to add a
package.json
file in the root directory of your project. You can run npm init
and follow the prompts, use the boilerplate generated by npm init -y
, or just copy this basic example of a filled out starter package:Note: When using this sample, be sure to update your project names and GitHub repo links.
We’ll also want to take this opportunity to add a Git ignore file, since we’ll be adding lots (hundreds) of node modules to the project which we don’t want to track. Just create a
.gitignore
dotfile in your project root, or if you have one already, be sure it includes these lines:4. Install Webpack as Project Dependency
You can install webpack via the command line using npm, with the following command:
This is the shorthand equivalent of
npm install webpack --save-dev
which will install the latest version of webpack via npm, and then saves it to our list of dev dependencies in our package.json
file.In order to work with webpack on the command line, you’ll also need to install the webpack cli tools:
At this point you should be able to run the command
npx webpack -v
(yes that’s npx) and immediately see a webpack version returned. If you run this command and see a progress bar or a prompt asking you to install webpack, it wasn’t added correctly.5. Add A Basic Webpack Config
Add a basic webpack config, defining an entry point and and an output pattern.
![Wordpress Wordpress](/uploads/1/3/7/3/137320985/932100173.jpg)
Our entry point in this case will be named
site
and will point to an index.js
file in ./src/site/
. This syntax allows us to define scalable configurations with multiple entry points that compile unique site components (for example, one per WordPress template type) as individual bundles that can be enqueued separately.With the multiple entry points syntax, we want to define an output filename using output patterns to ensure each bundle is unique, and in this case references the entry point name that generated it.
We’ll also need to add the entry point file itself, which for now can just be some placeholder content.
With the config and entry point files in place, we’re ready to compile our project assets with webpack. You can test if your new webpack config file works with this command that compiles a production build:
If that works, we can add the build and watch commands to our
package.json
file under scripts, with the following commands:Now we can run a production build using just
npm run build
at the command line, or npm run start
to run a watch build that recompiles unminified bundles whenever changes are detected.Wrapping Up
This tutorial covered the basics of how to add webpack as a project dependency and set up a basic custom config file. For a simple diff view of the changes outlined here, take a look at this pull request. Keep a look out for Part 2: Loading your theme files into Webpack and compiling them.
This webpack plugin serves two purposes:
- Externalize dependencies that are available as script dependencies on modern WordPress sites.
- Add an asset file for each entry point that declares an object with the list of WordPress script dependencies for the entry point. The asset file also contains the current version calculated for the current source code.
This allows JavaScript bundles produced by webpack to leverage WordPress style dependency sharing without an error-prone process of manually maintaining a dependency list.
Consult the webpack website for additional information on webpack concepts.
Installation #Installation
Install the module
Note: This package requires Node.js 12.0.0 or later. It also requires webpack 4.8.3 and newer. It is not compatible with older versions. Traktor s4 mk3 firmware update.
Usage #Usage
Webpack #Webpack
Use this plugin as you would other webpack plugins:
Note: Multiple instances of the plugin are not supported and may produced unexpected results. If you plan to extend the webpack configuration from
@wordpress/scripts
with your own DependencyExtractionWebpackPlugin
, be sure to remove the default instance of the plugin:Each entry point in the webpack bundle will include an asset file that declares the WordPress script dependencies that should be enqueued. Such file also contains the unique version hash calculated based on the file content.
For example:
By default, the following module requests are handled:
Request | Global | Script handle |
---|---|---|
@babel/runtime/regenerator | regeneratorRuntime | wp-polyfill |
@wordpress/* | wp['*'] | wp-* |
jquery | jQuery | jquery |
lodash-es | lodash | lodash |
lodash | lodash | lodash |
moment | moment | moment |
react-dom | ReactDOM | react-dom |
react | React | react |
Note: This plugin overlaps with the functionality provided by webpack
externals
. This plugin is intended to extract script handles from bundle compilation so that a list of script dependencies does not need to be manually maintained. If you don’t need to extract a list of script dependencies, use the externals
option directly.This plugin is compatible with
externals
, but they may conflict. For example, adding { externals: { '@wordpress/blob': 'wp.blob' } }
to webpack configuration will effectively hide the @wordpress/blob
module from the plugin and it will not be included in dependency lists.Options #Options
An object can be passed to the constructor to customize the behavior, for example:
outputFormat
- Type: string
- Default:
php
The output format for the generated asset file. There are two options available: ‘php’ or ‘json’.
combineAssets
- Type: boolean
- Default:
false
By default, one asset file is created for each entry point. When this flag is set to
true
, all information about assets is combined into a single assets.(json|php)
file generated in the output directory.combinedOutputFile
- Type: string
- Default:
null
This option is useful only when the
combineAssets
option is enabled. It allows providing a custom output file for the generated single assets file. It’s possible to provide a path that is relative to the output directory.Webpack Wordpress Plugin
useDefaults
- Type: boolean
- Default:
true
Pass
useDefaults: false
to disable the default request handling.injectPolyfill
- Type: boolean
- Default:
false
Force
wp-polyfill
to be included in each entry point’s dependency list. This would be the same as adding import '@wordpress/polyfill';
to each entry point.requestToExternal
- Type: function
requestToExternal
allows the module handling to be customized. The function should accept a module request string and may return a string representing the global variable to use. An array of strings may be used to access globals via an object path, e.g. wp.i18n
may be represented as [ 'wp', 'i18n' ]
.requestToExternal
provided via configuration has precedence over default external handling. Unhandled requests will be handled by the default unless useDefaults
is set to false
.requestToHandle
- Type: function
All of the external modules handled by the plugin are expected to be WordPress script dependencies
and will be added to the dependency list.
and will be added to the dependency list.
requestToHandle
allows the script handle included in the dependency list to be customized.If no string is returned, the script handle is assumed to be the same as the request.
requestToHandle
provided via configuration has precedence over the defaults. Unhandled requests will be handled by the default unless useDefaults
is set to false
.requestToExternal
and requestToHandle
The functions
requestToExternal
and requestToHandle
allow this module to handle arbitrary modules.requestToExternal
is necessary to handle any module and maps a module request to a global name.Wordpress Upload Plugin
requestToHandle
maps the same module request to a script handle, the strings that will be included in the entrypoint.asset.php
files.WordPress #WordPress
Npm Install Wordpress
Enqueue your script as usual and read the script dependencies dynamically: