Merge pull request #3 from Automattic/update/webpack-config-use-calypso-build

Blocks: Make webpack.config.extensions.js extend calypso-build's

Author: jeffersonrabb

package.json

@@ -4,7 +4,7 @@
   "main": "Gruntfile.js",
   "author": "Automattic",
   "devDependencies": {
-    "@automattic/calypso-build": "^1.0.0-alpha.0",
+    "@automattic/calypso-build": "^1.0.0-alpha.2",
     "@automattic/calypso-color-schemes": "^1.0.0-alpha.1",
     "@babel/core": "^7.4.0",
     "@babel/plugin-proposal-class-properties": "^7.4.0",
@@ -21,7 +21,6 @@
     "classnames": "^2.2.6",
     "copy-webpack-plugin": "^5.0.2",
     "css-loader": "^2.1.1",
-    "duplicate-package-checker-webpack-plugin": "^3.0.0",
     "eslint": "^5.16.0",
     "file-loader": "^3.0.1",
     "grunt": "^0.4.5",

src/setup/blocks.json

@@ -6,109 +6,53 @@
 /**
  * External dependencies
  */
-
-const _ = require( 'lodash' );
-const path = require( 'path' );
 const fs = require( 'fs' );
-const webpack = require( 'webpack' );
-const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
-const DuplicatePackageCheckerPlugin = require( 'duplicate-package-checker-webpack-plugin' );
-const FileConfig = require( '@automattic/calypso-build/webpack/file-loader' );
-const Minify = require( '@automattic/calypso-build/webpack/minify' );
-const SassConfig = require( '@automattic/calypso-build/webpack/sass' );
-const TranspileConfig = require( '@automattic/calypso-build/webpack/transpile' );
-const wordpressExternals = require( '@automattic/calypso-build/webpack/wordpress-externals' );
+const getBaseWebpackConfig = require( '@automattic/calypso-build/webpack.config.js' );
+const path = require( 'path' );
+
+/**
+ * Internal dependencies
+ */
+// const { workerCount } = require( './webpack.common' ); // todo: shard...
 
 /**
  * Internal variables
  */
 const editorSetup = path.join( __dirname, 'src', 'setup', 'editor' );
 const viewSetup = path.join( __dirname, 'src', 'setup', 'view' );
 
-function blockScripts( type, inputDir, presetBlocks ) {
-	return presetBlocks
+function blockScripts( type, inputDir, blocks ) {
+	return blocks
 		.map( block => path.join( inputDir, 'blocks', block, `${ type }.js` ) )
 		.filter( fs.existsSync );
 }
-/**
- * Return a webpack config object
- *
- * @return {object} webpack config
- */
-function getWebpackConfig() {
-	const workerCount = 1;
-	const cssFilename = '[name].css';
-
-	const presetPath = path.join( __dirname, 'src', 'setup', 'blocks.json' );
-	console.log( presetPath );
-	const presetIndex = require( presetPath );
-	const presetBlocks = _.get( presetIndex, [ 'production' ], [] );
-
-	// Helps split up each block into its own folder view script
-	const viewBlocksScripts = presetBlocks.reduce( ( viewBlocks, block ) => {
-		const viewScriptPath = path.join( __dirname, 'src', 'blocks', block, 'view.js' );
-		if ( fs.existsSync( viewScriptPath ) ) {
-			viewBlocks[ block + '/view' ] = [ viewSetup, ...[ viewScriptPath ] ];
-		}
-		return viewBlocks;
-	}, {} );
-
-	// Combines all the different blocks into one editor.js script
-	const editorScript = [
-		editorSetup,
-		...blockScripts( 'editor', path.join( __dirname, 'src' ), presetBlocks ),
-	];
-
-	const webpackConfig = {
-		entry: {
-			editor: editorScript,
-			...viewBlocksScripts,
-		},
-		mode: 'production',
-		module: {
-			rules: [
-				TranspileConfig.loader( {
-					workerCount,
-					configFile: path.join( __dirname, 'babel.config.js' ),
-					cacheDirectory: true,
-					exclude: /node_modules\//,
-				} ),
-				SassConfig.loader( {
-					preserveCssCustomProperties: false,
-					includePaths: [ path.join( __dirname, 'client' ) ],
-					prelude: '@import "~@automattic/calypso-color-schemes/src/shared/colors";',
-				} ),
-				FileConfig.loader(),
-			],
-		},
-		output: {
-			path: path.join( __dirname, 'dist' ),
-			filename: '[name].js',
-			libraryTarget: 'window',
-		},
-		resolve: {
-			extensions: [ '.json', '.js', '.jsx' ],
-			modules: [ 'node_modules' ],
-		},
-		plugins: [
-			new webpack.DefinePlugin( {
-				'process.env.NODE_ENV': JSON.stringify( process.env.NODE_ENV ),
-				global: 'window',
-			} ),
-			new webpack.IgnorePlugin( /^\.\/locale$/, /moment$/ ),
-			...SassConfig.plugins( { cssFilename, minify: true } ),
-			new DuplicatePackageCheckerPlugin(),
-			new CopyWebpackPlugin( [
-				{
-					from: presetPath,
-					to: 'index.json',
-				},
-			] ),
-		],
-		externals: [ wordpressExternals, 'wp', 'lodash' ],
-	};
-
-	return webpackConfig;
-}
 
-module.exports = getWebpackConfig;
+const blocksDir = path.join( __dirname, 'src', 'blocks' );
+const blocks = fs
+  .readdirSync( blocksDir )
+  .filter( block => fs.existsSync( path.join( __dirname, 'src', 'blocks', block, 'editor.js' ) ) );
+
+// Helps split up each block into its own folder view script
+const viewBlocksScripts = blocks.reduce( ( viewBlocks, block ) => {
+	const viewScriptPath = path.join( __dirname, 'src', 'blocks', block, 'view.js' );
+	if ( fs.existsSync( viewScriptPath ) ) {
+		viewBlocks[ block + '/view' ] = [ viewSetup, ...[ viewScriptPath ] ];
+	}
+	return viewBlocks;
+}, {} );
+
+// Combines all the different blocks into one editor.js script
+const editorScript = [
+	editorSetup,
+	...blockScripts( 'editor', path.join( __dirname, 'src' ), blocks ),
+];
+
+const webpackConfig = getBaseWebpackConfig( null, {
+	entry: {
+		editor: editorScript,
+		...viewBlocksScripts,
+	},
+	'output-path': path.join( __dirname, 'dist' ),
+} );
+
+module.exports = webpackConfig;