Webpack comes with it’s own auto-reloading devServer, but it’s difficult to get it working with WordPress. So instead, we’ll utilize the BrowserSync plugin to handle reloading our browser every time we make a change. As before, our first step is to require the BrowserSyncPlugin. @wordpress/scripts bundles the default webpack config used as a base by the WordPress editor. These are the defaults: Entry: src/index.js; Output: build/index.js; Loaders: babel-loader allows transpiling JavaScript files using Babel and webpack. @svgr/webpack and url-loader makes it possible to handle SVG files in JavaScript code. Webpack dev server w/ Wordpress. Ask Question Asked 2 years ago. Active 2 years ago. Viewed 686 times 3. I'm using Webpack for my WP theme development and I. Configuring Webpack in WordPress for the First Time Adding Webpack in your WordPress plugin or theme might feel scary. I stepped out from my comfort zone while working on a new plugin. Since that plugin might be using React or Vue in a future version, I wanted to have Babel and similar there.
The idea of using Webpack as a bundler has been on my mind since launching this site. Originally I was relying on code minification plugins in WordPress, but began to see some unpredictable behavior (plus I was dying for the ability to use SASS to style my site). Incorporating Webpack gave me more control, the ability to work with SASS, and laid the groundwork for exploring code chunking in the future.
Installing and Initializing Webpack
I started in the root folder of my WordPress Theme (for me this was [WordPress-root]/wp-content/themes/taylor/). Once inside, I initialized a new Node project:
Then I installed Webpack and the Webpack CLI:
With npm’s auto-generated package.json file, I added three script options as shorthand for the Webpack build and watch commands. I differentiated between a development build and a production build because setting the build mode to “production” provides extra optimization inside of Webpack1:
Organizing the Source Code
How to organize code is absolutely a matter of preference, and I don’t think there is really any wrong way to do it as long as things feel clean and organized. For this guide, I created a “js” directory and a “css”directory inside of my theme’s root folder. Each of these directories had a “src” folder, which contained my source code, and a “build” folder, which acted as the build target for my Webpack compiled assets:
Configuring the JavaScript Build (with Babel and Minification)
I used a pretty standard JavaScript build configuration, and decided to incorporate Babel for maximum browser compatibility. Code minification was also plug-and-play using the uglifyjs-webpack-plugin.
To install the Babel and the code minification dependencies, I ran:
Next, I created the Webpack config file – webpack.config.js – in my theme’s root folder with the following contents:
Configuring the SASS Build
Incorporating SASS compilation involved more trial and error, especially with some of the new Webpack 4 configurations. Webpack 4 introduced the mini-css-extract-plugin, which replaces the ever-popular extract-text-webpack-plugin2. Essentially this plugin allows Webpack to extract CSS code into its own individual file separate from the rest of the JavaScript code. In my build, I also included the optimize-css-assets-webpack-plugin to minify the compiled CSS:
After installing dependences, it was time to make the following updates to my webpack.config.js file:
- Including the mini-css-extract-plugin and optimize-css-assets-webpack-plugin for use in our config
- Adding ./css/src/main.scss as an entry point
- Defining a new module rule to handle .sass and .scss files with the mini-css-extract-plugin and sass-loader
- Specifying the output file name in the plugins section
- Adding the optimize-css-assets-webpack-plugin as an additional minimizer
Here is the updated webpack.config.js file that contains both the JavaScript and SASS configurations:
Including the Gutenberg Block Editor styles in the SASS build (Optional)
WordPress 5+ ships with Gutenberg, the new and improved Block Editor used for authoring content. The CSS styles that support the Block Editor are served automatically by WordPress as a separate enqueued script.
In order to bundle these styles into the Webpack SASS build, I had to first disable the enqueued script in my functions.php:
Next I had to modify my main app.scss SASS build entry point (./taylor/css/src/app.scss) to add an include referencing the Block Editor styles from within wp-includes:
Determining the relative path was tricky, but trying the ‘cd’ command from the same working directory as my main.scss file helped me figure out how many ../s to include.
Loading the compiled assets into WordPress
Wordpress Upload Plugin
Now that Webpack was compiling the JavaScript and CSS into their respective build directories, the last step was to enqueue these assets into my WordPress theme. This required a few lines in my theme’s functions.php:
Source Control and .gitignore
In order to avoid adding build files and node_modules to my git repository, I added the following lines to my .gitignore file:
Webpack Wordpress
Versioning the JavaScript and CSS Assets
Given that my WordPress instance was sitting behind an AWS CloudFront caching layer, it made make sense to version the Webpack compiled JavaScript and CSS assets so that each version could be accessed (and cached) independently. To do this, I simply added a hash to the output filenames in my webpack.config.js file:
Next, I incorporated the clean-webpack-plugin to remove old JavaScript and CSS files from my build directories (which made it easier to find the compiled JavaScript and CSS files when enqueuing them in WordPress):
Note: newer versions of CleanWebpackPlugin expect a full object as the configuration parameter (Thank you Moochou for pointing this out below!). For example:
Now that Webpack was producing files with unique and versioned filenames, I needed a way to enqueue them in WordPress without knowing the hash value in their filenames. I ended up using the following logic in order to do this:
Create Sourcemap Webpack Babel
- Webpack4 Release Nodes
- The Future of [extract-text-webpack-plugin]