Extending the WordPress Create Block Script webpack Config with Bonus Extras
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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", | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@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; /******/ }