Extending the WordPress Create Block Script webpack Config with Bonus Extras

.stylelintrc

{
	"extends": "stylelint-config-standard",
	"plugins": [
		"stylelint-order"
	],
	"rules": {
		"color-hex-length": "long",
		"font-family-name-quotes": null,
		"function-url-quotes": "always",
		"indentation": "tab",
		"max-empty-lines": 2,
		"number-leading-zero": "never",
		"order/order": [
			"custom-properties",
			"declarations"
		],
		"order/properties-alphabetical-order": true,
		"string-quotes": "single",
	}
}

package.json

{
	"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",
		"friendly-errors-webpack-plugin": "^1.7.0",
		"ignore-emit-webpack-plugin": "^2.0.2",
		"mini-css-extract-plugin": "^0.9.0",
		"node-sass": "^4.13.1",
		"optimize-css-assets-webpack-plugin": "^5.0.3",
		"postcss-loader": "^3.0.0",
		"postcss-preset-env": "^6.7.0",
		"sass-loader": "^8.0.2",
		"stylelint": "^13.2.0",
		"stylelint-config-standard": "^20.0.0",
		"stylelint-order": "^4.0.0",
		"stylelint-webpack-plugin": "^1.2.3",
		"terser-webpack-plugin": "^2.3.5"
	}
}

webpack.config.js

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const IgnoreEmitWebpackPlugin = require( 'ignore-emit-webpack-plugin' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const path = require('path');
const postcssPresetEnv = require( 'postcss-preset-env' );
const production = 'development' !== process.env.NODE_ENV;
const StylelintWebpackPlugin = require( 'stylelint-webpack-plugin' );
const TerserWebpackPlugin = require( 'terser-webpack-plugin' );

module.exports = {
    ...defaultConfig,
    module: {
        ...defaultConfig.module,
        rules: [
            ...defaultConfig.module.rules,
            {
                test: /\.s[ac]ss$/i,
                use: [
                    { loader: MiniCssExtractPlugin.loader },
                    { loader: 'css-loader' },
                    {
						loader: 'postcss-loader',
						options: {
							plugins: () => [ postcssPresetEnv( { stage: 3 } ) ],
						},
					},
                    { loader: 'sass-loader' },
                ],
            },
        ],
    },
    optimization: {
        ...defaultConfig.optimization,
        minimize: true,
        minimizer: [ 
            new OptimizeCssAssetsWebpackPlugin(),
            new TerserWebpackPlugin(),
        ],
		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 FriendlyErrorsWebpackPlugin(),
        new IgnoreEmitWebpackPlugin( [ 'editor.js', 'style.js' ] ),
        new StylelintWebpackPlugin({
            files: 'src/scss/*.s?(a|c)ss',
            failOnError: true,
            fix: true,
            syntax: 'scss',
		}),
        new MiniCssExtractPlugin( {
            filename: '../[name].css',
        } ),
    ],
};

if ( production ) {
    module.exports.devtool = false;
}

@mattwatsoncodes Thanks for your article. I'm trying to setup webpack following your article but I'm unable to build it. CSS is working fine but in block.js exporting extra code
/******/ // install a JSONP callback for chunk loading /******/ function webpackJsonpCallback(data) { /******/ var chunkIds = data[0]; /******/ var moreModules = data[1]; /******/ var executeModules = data[2]; /******/ /******/ // add "moreModules" to the modules object, /******/ // then flag all "chunkIds" as loaded and fire callback /******/ var moduleId, chunkId, i = 0, resolves = []; /******/ for(;i < chunkIds.length; i++) { /******/ chunkId = chunkIds[i]; /******/ if(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) { /******/ resolves.push(installedChunks[chunkId][0]); /******/ } /******/ installedChunks[chunkId] = 0; /******/ } /******/ for(moduleId in moreModules) { /******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { /******/ modules[moduleId] = moreModules[moduleId]; /******/ } /******/ } /******/ if(parentJsonpFunction) parentJsonpFunction(data); /******/ /******/ while(resolves.length) { /******/ resolves.shift()(); /******/ } /******/ /******/ // add entry modules from loaded chunk to deferred list /******/ deferredModules.push.apply(deferredModules, executeModules || []); /******/ /******/ // run deferred modules when all chunks ready /******/ return checkDeferredModules(); /******/ }; /******/ function checkDeferredModules() { /******/ var result; /******/ for(var i = 0; i < deferredModules.length; i++) { /******/ var deferredModule = deferredModules[i]; /******/ var fulfilled = true; /******/ for(var j = 1; j < deferredModule.length; j++) { /******/ var depId = deferredModule[j]; /******/ if(installedChunks[depId] !== 0) fulfilled = false; /******/ } /******/ if(fulfilled) { /******/ deferredModules.splice(i--, 1); /******/ result = __webpack_require__(__webpack_require__.s = deferredModule[0]); /******/ } /******/ } /******/ /******/ return result; /******/ }