Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Extending the WordPress Create Block Script webpack Config
{
"name": "plugin-slug",
"version": "0.1.0",
"description": "Plugin Description",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
"main": "build/index.js",
"scripts": {
"build": "wp-scripts build",
"lint:css": "wp-scripts lint-style",
"lint:js": "wp-scripts lint-js",
"start": "wp-scripts start",
"packages-update": "wp-scripts packages-update"
},
"devDependencies": {
"@wordpress/scripts": "^7.1.0",
"css-loader": "^3.4.2",
"ignore-emit-webpack-plugin": "^2.0.2",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.1",
"sass-loader": "^8.0.2"
}
}
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const IgnoreEmitWebPackPlugin = require( 'ignore-emit-webpack-plugin' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
{
test: /\.s[ac]ss$/i,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
],
},
],
},
optimization: {
...defaultConfig.optimization,
splitChunks: {
cacheGroups: {
default: false,
editor: {
chunks: 'all',
enforce: true,
name: 'editor',
test: /editor\.s[ac]ss$/i,
},
style: {
chunks: 'all',
enforce: true,
name: 'style',
test: /style\.s[ac]ss$/i,
},
},
},
},
plugins: [
...defaultConfig.plugins,
new IgnoreEmitWebPackPlugin( [ 'editor.js', 'style.js' ] ),
new MiniCssExtractPlugin( {
filename: '../[name].css',
} ),
],
};
@edmundcwm

This comment has been minimized.

Copy link

edmundcwm commented Apr 18, 2020

hmm I tried this config but there's only one css file being output. I then tried adding the enforce: true property for each cacheGroups and it worked.

Any idea why?

Thanks for this and the accompanying article!

@mattwatsoncodes

This comment has been minimized.

Copy link
Owner Author

mattwatsoncodes commented Apr 18, 2020

Hi @edmundcwm thank you for the feedback.

I will have to revisit this and work it out, as its not currently in my working memory. The chances are I have a typo in my script.

Watch this space 👍

@edmundcwm

This comment has been minimized.

Copy link

edmundcwm commented Apr 18, 2020

Noted. Appreciate the prompt reply!

@michaelperrin

This comment has been minimized.

Copy link

michaelperrin commented Apr 28, 2020

Thanks for the tip @edmundcwm, as I got the same issue 👍

@mattwatsoncodes

This comment has been minimized.

Copy link
Owner Author

mattwatsoncodes commented May 5, 2020

Thank you @edmundcwm and @michaelperrin for this. I've tested and updated the example with enforce: true as suggested.

@mattwatsoncodes

This comment has been minimized.

Copy link
Owner Author

mattwatsoncodes commented May 7, 2020

@edmundcwm / @michaelperrin,

Actually testing this further, adding enforce: true does produce the files I need, but the index.js no longer compiles. How did you overcome this?

I've changed my config to look like this now: https://jeffreycarandang.com/create-gutenberg-block-plugin-wp-scripts-postcss-build/

I will likely have to re-write these articles to reflect.

@edmundcwm

This comment has been minimized.

Copy link

edmundcwm commented May 7, 2020

Yeap that's true. I forgot to add to my comment that enforce: true didn't completely work for me (for some strange reasons).

I'm using this template now. I believe the key is to have multiple entry points for both frontend and editor.

@mattwatsoncodes

This comment has been minimized.

Copy link
Owner Author

mattwatsoncodes commented May 7, 2020

Cheers for the tip @edmundcwm. I've solved the issue now, so I'll update those blog posts.

Interesting template. I'll take a look at that and see if its a better way.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.