WIP: Introducing wp-scripts in cgb-scripts to replace webpack

packages/cgb-scripts/config/paths.js

@@ -7,6 +7,10 @@
 const path = require( 'path' );
 const fs = require( 'fs' );
 
+// @remove-on-eject-begin
+const resolvePkg = require( 'resolve-pkg' );
+// @remove-on-eject-end
+
 // Make sure any symlinks in the project folder are resolved:
 const pluginDir = fs.realpathSync( process.cwd() );
 const resolvePlugin = relativePath => path.resolve( pluginDir, relativePath );
@@ -17,7 +21,9 @@ module.exports = {
 	pluginSrc: resolvePlugin( 'src' ), // Plugin src folder path.
 	pluginBlocksJs: resolvePlugin( 'src/blocks.js' ),
 	yarnLockFile: resolvePlugin( 'yarn.lock' ),
-	pluginDist: resolvePlugin( '.' ), // We are in ./dist folder already so the path '.' resolves to ./dist/.
+	pluginDist: resolvePlugin( 'dist' ),
+	devConfig: 'config/webpack.config.dev.js',
+	prodConfig: 'config/webpack.config.prod.js',
 };
 
 // @remove-on-eject-begin
@@ -28,10 +34,12 @@ module.exports = {
 	dotenv: resolvePlugin( '.env' ),
 	pluginSrc: resolvePlugin( 'src' ),
 	pluginBlocksJs: resolvePlugin( 'src/blocks.js' ),
-	pluginDist: resolvePlugin( '.' ), // We are in ./dist folder already so the path '.' resolves to ./dist/.
+	pluginDist: resolvePlugin( 'dist' ),
 	yarnLockFile: resolvePlugin( 'yarn.lock' ),
 	appPath: resolvePlugin( '.' ),
 	// These properties only exist before ejecting:
 	ownPath: resolveOwn( '.' ),
+	devConfig: resolvePkg( 'cgb-scripts/config/webpack.config.dev.js', { cwd: __dirname } ),
+	prodConfig: resolvePkg( 'cgb-scripts/config/webpack.config.prod.js', { cwd: __dirname } ),
 };
 // @remove-on-eject-end

packages/cgb-scripts/config/webpack.config.dev.js

@@ -19,105 +19,98 @@
  *
  * @since 1.0.0
  */
-
 const paths = require( './paths' );
 const externals = require( './externals' );
-const autoprefixer = require( 'autoprefixer' );
-const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
-
-// Extract style.css for both editor and frontend styles.
-const blocksCSSPlugin = new ExtractTextPlugin( {
-	filename: './dist/blocks.style.build.css',
-} );
-
-// Extract editor.css for editor styles.
-const editBlocksCSSPlugin = new ExtractTextPlugin( {
-	filename: './dist/blocks.editor.build.css',
-} );
-
-// Configuration for the ExtractTextPlugin — DRY rule.
-const extractConfig = {
-	use: [
-		// "postcss" loader applies autoprefixer to our CSS.
-		{ loader: 'raw-loader' },
-		{
-			loader: 'postcss-loader',
-			options: {
-				ident: 'postcss',
-				plugins: [
-					autoprefixer( {
-						browsers: [
-							'>1%',
-							'last 4 versions',
-							'Firefox ESR',
-							'not ie < 9', // React doesn't support IE8 anyway
-						],
-						flexbox: 'no-2009',
-					} ),
-				],
-			},
-		},
-		// "sass" loader converts SCSS to CSS.
-		{
-			loader: 'sass-loader',
-			options: {
-				// Add common CSS file for variables and mixins.
-				data: '@import "./src/common.scss";\n',
-				outputStyle: 'nested',
-			},
-		},
-	],
-};
+const postcssPresetEnv = require( 'postcss-preset-env' );
+const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
+const FixStyleOnlyEntriesPlugin = require( 'webpack-fix-style-only-entries' );
+const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
+const { mode, resolve, plugins, stats } = defaultConfig;
 
-// Export configuration.
 module.exports = {
+	mode,
 	entry: {
-		'./dist/blocks.build': paths.pluginBlocksJs, // 'name' : 'path/file.ext'.
+		'blocks.build': paths.pluginBlocksJs,
 	},
 	output: {
-		// Add /* filename */ comments to generated require()s in the output.
-		pathinfo: true,
-		// The dist folder.
+		filename: '[name].js',
 		path: paths.pluginDist,
-		filename: '[name].js', // [name] = './dist/blocks.build' as defined above.
+		pathinfo: true,
+	},
+	resolve,
+	optimization: {
+		splitChunks: {
+			chunks: 'all',
+			cacheGroups: {
+				editor: {
+					name: 'editor',
+					test: /editor\.(sc|sa|c)ss$/,
+					enforce: true,
+				},
+				style: {
+					name: 'style',
+					test: /style\.(sc|sa|c)ss$/,
+					enforce: true,
+				},
+				default: false,
+			},
+		},
 	},
-	// You may want 'eval' instead if you prefer to see the compiled output in DevTools.
-	devtool: 'cheap-eval-source-map',
 	module: {
+		...defaultConfig.module,
 		rules: [
+			...defaultConfig.module.rules,
 			{
-				test: /\.(js|jsx|mjs)$/,
-				exclude: /(node_modules|bower_components)/,
-				use: {
-					loader: 'babel-loader',
-					options: {
-						// @remove-on-eject-begin
-						babelrc: false,
-						presets: [ require.resolve( 'babel-preset-cgb' ) ],
-						// @remove-on-eject-end
-						// This is a feature of `babel-loader` for webpack (not Babel itself).
-						// It enables caching results in ./node_modules/.cache/babel-loader/
-						// directory for faster rebuilds.
-						cacheDirectory: true,
+				test: /\.scss$/,
+				use: [
+					MiniCssExtractPlugin.loader,
+					'css-loader',
+					{
+						loader: 'postcss-loader',
+						options: {
+							ident: 'postcss',
+							plugins: () => [
+								postcssPresetEnv( {
+									stage: 3,
+									browsers: [
+										'>1%',
+										'last 4 versions',
+										'Firefox ESR',
+										'not ie < 9', // React doesn't support IE8 anyway
+									],
+								} ),
+							],
+						},
 					},
-				},
-			},
-			{
-				test: /style\.s?css$/,
-				exclude: /(node_modules|bower_components)/,
-				use: blocksCSSPlugin.extract( extractConfig ),
-			},
-			{
-				test: /editor\.s?css$/,
-				exclude: /(node_modules|bower_components)/,
-				use: editBlocksCSSPlugin.extract( extractConfig ),
+					{
+						loader: 'sass-loader',
+						options: {
+							prependData: '@import "./src/common.scss";',
+							sassOptions: {
+								outputStyle: 'nested',
+							},
+						},
+					},
+				],
 			},
 		],
 	},
 	// Add plugins.
-	plugins: [ blocksCSSPlugin, editBlocksCSSPlugin ],
-	stats: 'minimal',
-	// stats: 'errors-only',
+	plugins: [
+		new FixStyleOnlyEntriesPlugin( {
+			silent: false,
+		} ),
+
+		// Extract CSS into individual files.
+		new MiniCssExtractPlugin( {
+			filename: 'blocks.[name].build.css',
+			chunkFilename: 'blocks.[name].build.css',
+		} ),
+
+		// Extract @wordpress/scripts plugins.
+		...plugins,
+	],
+	stats,
 	// Add externals.
 	externals: externals,
 };