Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Extending the WordPress Create Block Script webpack Config with Bonus Extras
{
"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",
}
}
{
"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"
}
}
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;
}
@yurenlimbu

This comment has been minimized.

Copy link

yurenlimbu commented Aug 3, 2020

@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; /******/ }

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.