Skip to content

Instantly share code, notes, and snippets.

@dulgermuhammet
Created December 2, 2022 16:43
Show Gist options
  • Select an option

  • Save dulgermuhammet/efaf56f33f797c5ca095c2f906a472ef to your computer and use it in GitHub Desktop.

Select an option

Save dulgermuhammet/efaf56f33f797c5ca095c2f906a472ef to your computer and use it in GitHub Desktop.
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',
} ),
],
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment