Update versions in package.json, use @wordpress/scripts for build process

.gitignore

@@ -88,6 +88,7 @@ package-lock.json
 *.swp
 *.tmp
 *.bak
+*.map
 
 # Sass #
 #######

js/admin.block-post.js

@@ -352,7 +352,7 @@
 			const postType = $( input ).val();
 			if ( -1 === excludedPostTypes.indexOf( postType ) ) {
 				displayList.push(
-					$( input ).next( 'label' ).text()
+					$( input ).next( 'label' ).text(),
 				);
 			}
 		}

js/blocks/components/advanced-controls.js

@@ -20,7 +20,7 @@ const AdvancedControls = ( { block } ) => {
 
 	const tip = sprintf(
 		__( 'The Additional CSS Class can be included in your block template with the %1$s field.', 'block-lab' ),
-		'<code>className</code>'
+		'<code>className</code>',
 	);
 
 	return (

js/blocks/components/fetch-input.js

@@ -133,7 +133,7 @@ class FetchInput extends Component {
 					'%d result found, use up and down arrow keys to navigate.',
 					'%d results found, use up and down arrow keys to navigate.',
 					results.length,
-					'block-lab'
+					'block-lab',
 				), results.length ), 'assertive' );
 
 				if ( null === this.state.selectedSuggestion && '' !== this.getInputValue() ) {

js/blocks/components/repeater-rows.js

@@ -122,7 +122,7 @@ class RepeaterRows extends Component {
 				setTimeout( () => { /* eslint-disable-line @wordpress/react-no-unsafe-timeout */
 					rowRefTo.classList.remove( 'row-to' );
 					rowRefFrom.classList.remove( 'row-from' );
-				}, 1000 )
+				}, 1000 ),
 			);
 
 			scrollContainer.scroll( { top: scrollTop, behavior: 'smooth' } );

js/blocks/loader/fields.js

@@ -38,7 +38,7 @@ const simplifiedFields = ( fields ) => {
 			{
 				...field,
 				name: fieldName,
-			}
+			},
 		);
 	}
 

package.json

@@ -8,8 +8,8 @@
     "url": "https://github.com/getblocklab/block-lab"
   },
   "scripts": {
-    "dev": "cross-env BABEL_ENV=default webpack --watch",
-    "build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
+    "dev": "wp-scripts start",
+    "build": "wp-scripts build",
     "lint": "npm-run-all --parallel lint:*",
     "lint:js": "eslint js",
     "lint:js:fix": "eslint js --fix",
@@ -19,33 +19,37 @@
   "author": "Block Lab",
   "license": "GPL-2.0+",
   "devDependencies": {
-    "@wordpress/babel-preset-default": "^1.2.0",
-    "@wordpress/eslint-plugin": "3.0.0",
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^8.2.3",
-    "babel-loader": "^7.1.4",
-    "classnames": "^2.2.6",
-    "cross-env": "^5.1.5",
-    "css-loader": "^0.28.11",
-    "del": "^3.0.0",
-    "eslint": "6.3.0",
+    "@wordpress/babel-preset-default": "4.7.0",
+    "@wordpress/eslint-plugin": "3.2.0",
+    "@wordpress/scripts": "6.0.0",
+    "autoprefixer": "9.7.3",
+    "babel-core": "6.26.3",
+    "babel-eslint": "10.0.3",
+    "babel-loader": "8.0.6",
+    "cross-env": "6.0.3",
+    "css-loader": "3.4.0",
+    "del": "^5.1.0",
+    "eslint": "6.7.2",
     "eslint-plugin-eslint-comments": "3.1.2",
-    "eslint-plugin-import": "2.18.2",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "gulp": "^4.0.0",
+    "eslint-plugin-import": "2.19.1",
+    "gulp": "^4.0.2",
     "gulp-run": "^1.7.1",
-    "gulp-string-replace": "^1.1.1",
-    "merge-stream": "^1.0.1",
-    "node-sass": "^4.9.0",
+    "gulp-string-replace": "^1.1.2",
+    "merge-stream": "^2.0.0",
+    "mini-css-extract-plugin": "0.8.2",
+    "node-sass": "^4.13.0",
     "npm-run-all": "4.1.5",
-    "postcss-loader": "^2.1.5",
-    "raw-loader": "^0.5.1",
-    "re-resizable": "4.4.8",
-    "react": "16.4.1",
-    "sass-loader": "^6.0.7",
-    "style-loader": "^0.19.1",
-    "uglifyjs-webpack-plugin": "^1.2.7",
-    "webpack": "^3.11.0"
+    "postcss-loader": "^3.0.0",
+    "raw-loader": "^4.0.0",
+    "re-resizable": "6.1.1",
+    "react": "16.12.0",
+    "sass-loader": "8.0.0",
+    "style-loader": "^1.0.2",
+    "uglifyjs-webpack-plugin": "2.2.0",
+    "webpack": "4.41.3",
+    "webpack-cli": "3.3.10"
   },
-  "dependencies": {}
+  "dependencies": {
+    "classnames": "^2.2.6"
+  }
 }

webpack.config.js

@@ -1,43 +1,11 @@
 const path = require( 'path' );
-const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
+const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
 const UglifyJSPlugin = require( 'uglifyjs-webpack-plugin' );
-
-// Set different CSS extraction for editor only and common block styles
-const blocksCSSPlugin = new ExtractTextPlugin( {
-	filename: './css/blocks.style.css',
-} );
-const editBlocksCSSPlugin = new ExtractTextPlugin( {
-	filename: './css/blocks.editor.css',
-} );
-const uglifyJSPlugin = new UglifyJSPlugin( {
-	uglifyOptions: {
-		mangle: {},
-		compress: true
-	},
-	sourceMap: false
-} );
-
-// Configuration for the ExtractTextPlugin.
-const extractConfig = {
-	use: [
-		{ loader: 'raw-loader' },
-		{
-			loader: 'postcss-loader',
-			options: {
-				plugins: [ require( 'autoprefixer' ) ],
-			},
-		},
-		{
-			loader: 'sass-loader',
-			query: {
-				outputStyle: 'compressed',
-			},
-		},
-	],
-};
-
+const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
+const isProduction = process.env.NODE_ENV === 'production';
 
 module.exports = {
+	...defaultConfig,
 	entry: {
 		'./js/editor.blocks': './js/blocks/index.js',
 		'./js/scripts': './js/src/index.js',
@@ -47,7 +15,7 @@ module.exports = {
 		filename: '[name].js',
 	},
 	watch: false,
-	// devtool: 'cheap-eval-source-map',
+	mode: isProduction ? 'production' : 'development',
 	module: {
 		rules: [
 			{
@@ -57,19 +25,42 @@ module.exports = {
 					loader: 'babel-loader',
 				},
 			},
-			{
-				test: /style\.s?css$/,
-				use: blocksCSSPlugin.extract( extractConfig ),
-			},
 			{
 				test: /editor\.s?css$/,
-				use: editBlocksCSSPlugin.extract( extractConfig ),
+				use: [
+					{
+						loader: MiniCssExtractPlugin.loader,
+						options: {
+							// Only allow hot module reloading in development.
+							hmr: process.env.NODE_ENV === 'development',
+							// Force reloading if hot module reloading does not work.
+							reloadAll: true,
+						},
+					},
+					'css-loader',
+					{
+						loader: 'postcss-loader',
+						options: {
+							plugins: [ require( 'autoprefixer' ) ],
+						},
+					},
+					{
+						loader: 'sass-loader',
+					},
+				],
 			},
 		],
 	},
 	plugins: [
-		blocksCSSPlugin,
-		editBlocksCSSPlugin,
-		uglifyJSPlugin,
+		new MiniCssExtractPlugin( {
+			filename: './css/blocks.editor.css',
+		} ),
+		new UglifyJSPlugin( {
+			uglifyOptions: {
+				mangle: {},
+				compress: true,
+			},
+			sourceMap: ! isProduction,
+		} ),
 	],
 };