Scripts: Add support for static assets in build commands (#28043)

* Scripts: Add supports for static assets in build commands Fixes #27581. * Docs: Add details how to use fonts and images * Use file loader for images
WordPress · Jan 9, 2021 · a7fb6bb · a7fb6bb
1 parent 8b9afe9
commit a7fb6bb
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 8 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md
@@ -14,6 +14,7 @@
 -   `wordpress` subfolder is no longer ignored when detecting files for testing, linting or formatting.
 -   The bundled `eslint` dependency has been updated from requiring `^7.1.0` to requiring `^7.17.0` ([#27965](https://github.com/WordPress/gutenberg/pull/27965)).
 -   Make it possible to transpile `.jsx` files with `build` and `start` commands ([#28002](https://github.com/WordPress/gutenberg/pull/28002)).
+-   Add support for static assets (fonts and images) for `build` and `start` commands ([#28043](https://github.com/WordPress/gutenberg/pull/28043)).
 
 ### Internal
 

diff --git a/packages/scripts/README.md b/packages/scripts/README.md
@@ -282,7 +282,7 @@ By default, files located in `build`, `node_modules`, and `vendor` folders are i
 
 #### Advanced information
 
-It uses [stylelint](https://github.com/stylelint/stylelint) with the [@wordpress/stylelint-config]((https://www.npmjs.com/package/@wordpress/stylelint-config) ) configuration per the [WordPress CSS Coding Standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/). You can override them with your own rules as described in [stylelint user guide](https://stylelint.io/user-guide/configure). Learn more in the [Advanced Usage](#advanced-usage) section.
+It uses [stylelint](https://github.com/stylelint/stylelint) with the [@wordpress/stylelint-config](<(https://www.npmjs.com/package/@wordpress/stylelint-config)>) configuration per the [WordPress CSS Coding Standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/). You can override them with your own rules as described in [stylelint user guide](https://stylelint.io/user-guide/configure). Learn more in the [Advanced Usage](#advanced-usage) section.
 
 ### `packages-update`
 
@@ -540,6 +540,24 @@ If you do so, then CSS files generated will follow the names of the entry points
 
 Avoid using `style` keyword in an entry point name, this might break your build process.
 
+#### Using fonts and images
+
+It is possible to reference font (`woff`, `woff2`, `eot`, `ttf` and `otf`) and image (`bmp`, `png`, `jpg`, `jpeg` and `gif`) files from CSS that is controlled by webpack as explained in the previous section.
+
+_Example:_
+
+```css
+/* style.css */
+@font-face {
+	font-family: Gilbert;
+	src: url( ../assets/gilbert-color.otf );
+}
+.wp-block-my-block {
+	background-color: url( ../assets/block-background.png );
+	font-family: Gilbert;
+}
+```
+
 #### Using SVG
 
 _Example:_

diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js
@@ -157,10 +157,6 @@ const config = {
 					},
 				],
 			},
-			{
-				test: /\.svg$/,
-				use: [ '@svgr/webpack', 'url-loader' ],
-			},
 			{
 				test: /\.css$/,
 				use: cssLoaders,
@@ -177,12 +173,38 @@ const config = {
 					},
 				],
 			},
+			{
+				test: /\.svg$/,
+				use: [ '@svgr/webpack', 'url-loader' ],
+			},
+			{
+				test: /\.(bmp|png|jpe?g|gif)$/i,
+				loader: require.resolve( 'file-loader' ),
+				options: {
+					name: 'images/[name].[hash:8].[ext]',
+				},
+			},
+			{
+				test: /\.(woff|woff2|eot|ttf|otf)$/,
+				use: [
+					{
+						loader: 'file-loader',
+						options: {
+							name: 'fonts/[name].[hash:8].[ext]',
+						},
+					},
+				],
+			},
 		],
 	},
 	plugins: [
-		// During rebuilds, all webpack assets that are not used anymore
-		// will be removed automatically.
-		new CleanWebpackPlugin(),
+		// During rebuilds, all webpack assets that are not used anymore will be
+		// removed automatically. There is an exception added in watch mode for
+		// fonts and images. It is a known limitations:
+		// https://github.com/johnagan/clean-webpack-plugin/issues/159
+		new CleanWebpackPlugin( {
+			cleanAfterEveryBuildPatterns: [ '!fonts/**', '!images/**' ],
+		} ),
 		// The WP_BUNDLE_ANALYZER global variable enables a utility that represents
 		// bundle content as a convenient interactive zoomable treemap.
 		process.env.WP_BUNDLE_ANALYZER && new BundleAnalyzerPlugin(),

diff --git a/packages/scripts/package.json b/packages/scripts/package.json
@@ -51,6 +51,7 @@
 		"dir-glob": "^3.0.1",
 		"eslint": "^7.17.0",
 		"eslint-plugin-markdown": "^1.0.2",
+		"file-loader": "^6.2.0",
 		"ignore-emit-webpack-plugin": "^2.0.6",
 		"jest": "^26.6.3",
 		"jest-puppeteer": "^4.4.0",