Merge pull request #136 from privatenumber/develop

privatenumber · Mar 27, 2021 · df5303c · df5303c
2 parents 87f0baa + 0c26a25
commit df5303c
Show file tree

Hide file tree

Showing 11 changed files with 1,817 additions and 3,089 deletions.
diff --git a/README.md b/README.md
@@ -33,8 +33,8 @@ In `webpack.config.js`:
 +         test: /\.js$/,
 +         loader: 'esbuild-loader',
 +         options: {
-+           loader: 'jsx', // Remove this if you're not using JSX
-+           target: 'es2015' // Syntax to compile to (see options below for possible values)
++           loader: 'jsx',  // Remove this if you're not using JSX
++           target: 'es2015'  // Syntax to compile to (see options below for possible values)
 +         }
 +       },
 
@@ -59,7 +59,7 @@ In `webpack.config.js`:
 +         test: /\.tsx?$/,
 +         loader: 'esbuild-loader',
 +         options: {
-+           loader: 'tsx', // Or 'ts' if you don't need tsx
++           loader: 'tsx',  // Or 'ts' if you don't need tsx
 +           target: 'es2015'
 +         }
 +       },
@@ -86,10 +86,10 @@ Alternatively, you can also pass it in directly via the [`tsconfigRaw` option](h
   }
 ```
 
-⚠️ esbuild only supports a subset of `tsconfig` options [(see `TransformOptions` interface)](https://github.com/evanw/esbuild/blob/b901055/lib/types.ts#L127-L133) and does not do type-checks. It's recommended to use a type-aware IDE or `tsc --noEmit` for type-checking instead. It is also recommend to enable [`isolatedModules`](https://www.typescriptlang.org/tsconfig#isolatedModules) and [`esModuleInterop`](https://www.typescriptlang.org/tsconfig/#esModuleInterop) options in your `tsconfig` by the [esbuild docs](https://esbuild.github.io/content-types/#typescript-caveats).
+⚠️ esbuild only supports a subset of `tsconfig` options [(see `TransformOptions` interface)](https://github.com/evanw/esbuild/blob/b901055/lib/types.ts#L127-L133) and does not do type-checks. It's recommended to use a type-aware IDE or `tsc --noEmit` for type-checking instead. It is also recommended to enable [`isolatedModules`](https://www.typescriptlang.org/tsconfig#isolatedModules) and [`esModuleInterop`](https://www.typescriptlang.org/tsconfig/#esModuleInterop) options in your `tsconfig` by the [esbuild docs](https://esbuild.github.io/content-types/#typescript-caveats).
 
 
-### Minification (eg. Terser)
+### JS Minification (eg. Terser)
 You can replace JS minifiers like Terser or UglifyJs. Checkout the [benchmarks](https://github.com/privatenumber/minification-benchmarks) to see how much faster esbuild is. The `target` option tells esbuild that it can use newer JS syntax to perform better minification.
 
 In `webpack.config.js`:
@@ -101,41 +101,121 @@ In `webpack.config.js`:
     ...,
 
 +   optimization: {
-+     minimize: true,
 +     minimizer: [
 +       new ESBuildMinifyPlugin({
-+         target: 'es2015' // Syntax to compile to (see options below for possible values)
++         target: 'es2015'  // Syntax to compile to (see options below for possible values)
 +       })
 +     ]
 +   },
   }
 ```
 
-#### _💁‍♀️ Protip: Use the minify plugin in-place of the loader to transpile your JS_
+#### _💁‍♀️ Protip: Use the minify plugin in-place of the loader to transpile the JS_
 If you're not using TypeScript, JSX, or any syntax unsupported by Webpack, you can also leverage the minifier for transpilation (as an alternative to Babel). It will be faster because there's less files to work on and will produce a smaller output because the polyfills will only be bundled once for the entire build instead of per file. Simply set the `target` option on the minifier to specify which support level you want.
 
+
+### CSS Minification
+
+There are two ways to minify CSS, depending on your setup. You should already have CSS setup in your build using [`css-loader`](https://github.com/webpack-contrib/css-loader).
+
+⚠️ esbuild currently [doesn't support source-maps for CSS minification](https://github.com/evanw/esbuild/issues/519).
+
+#### CSS assets
+If your CSS is extracted and emitted as a CSS file, you can replace CSS minification plugins like [`css-minimizer-webpack-plugin`](https://github.com/webpack-contrib/css-minimizer-webpack-plugin) or [`optimize-css-assets-webpack-plugin`](https://github.com/NMFR/optimize-css-assets-webpack-plugin) with the same `ESBuildMinifyPlugin` by enabling the `css` option.
+
+Assuming the CSS is extracted using something like [MiniCssExtractPlugin](https://github.com/webpack-contrib/mini-css-extract-plugin), in `webpack.config.js`:
+
+```diff
+  const { ESBuildMinifyPlugin } = require('esbuild-loader')
+  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+  module.exports = {
+    ...,
+
+    optimization: {
+      minimizer: [
+        new ESBuildMinifyPlugin({
+          target: 'es2015',
++         css: true  // Apply minification to CSS assets
+        })
+      ]
+    },
+
+    module: {
+      rules: [
+        {
+          test: /\.css$/i,
+          use: [
+            MiniCssExtractPlugin.loader,
+            'css-loader'
+          ]
+        }
+      ]
+    },
+
+    plugins: [
+      new MiniCssExtractPlugin()
+    ]
+  }
+```
+
+
+#### CSS in JS
+
+If your CSS is not emitted as a CSS file, but rather loaded via JS using something like [`style-loader`](https://github.com/webpack-contrib/style-loader), you can use the loader for minification.
+
+
+In `webpack.config.js`:
+
+```diff
+  module.exports = {
+    ...,
+
+    module: {
+      rules: [
+        {
+          test: /\.css$/i,
+          use: [
+            'style-loader',
+            'css-loader',
++           {
++             loader: 'esbuild-loader',
++             options: {
++               loader: 'css',
++               minify: true
++             }
++           }
+          ]
+        }
+      ]
+    }
+  }
+```
+
+
 ### Examples
 If you'd like to see working Webpack builds that use esbuild-loader for basic JS, React, TypeScript, or Next.js, check out the [examples repo](https://github.com/privatenumber/esbuild-loader-examples).
 
 ## ⚙️ Options
 
 ### Loader
 The loader supports options from [esbuild](https://github.com/evanw/esbuild/blob/b901055/lib/types.ts#L126-L138).
-- `target` `String` (`es2015`) - [Environment target](https://esbuild.github.io/api/#target) (e.g. es2016, chrome80, esnext)
-- `loader` `String` (`js`) - Which loader to use to handle file
+- `target` `String` (`'es2015'`) - [Environment target](https://esbuild.github.io/api/#target) (e.g. es2016, chrome80, esnext)
+- `loader` `String` (`'js'`) - Which loader to use to handle file
   - [Possible values](https://github.com/evanw/esbuild/blob/b901055/lib/types.ts#L3): `js`, `jsx`, `ts`, `tsx`, `json`, `text`, `base64`, `file`, `dataurl`, `binary`
 - `jsxFactory` `String` - What to use instead of React.createElement
 - `jsxFragment` `String` - What to use instead of React.Fragment
 
 Enable source-maps via [`devtool`](https://webpack.js.org/configuration/devtool/)
 
 ### MinifyPlugin
-- `target` `String` (`esnext`) - [Environment target](https://github.com/evanw/esbuild#javascript-syntax-support) (e.g. es2016, chrome80, esnext)
+- `target` `String|Aray<String>` (`'esnext'`) - [Environment target](https://github.com/evanw/esbuild#javascript-syntax-support) (e.g. `'es2016'`, `['chrome80', 'esnext']`)
 - `minify` `Boolean` (`true`) - Sets all `minify` flags
 - `minifyWhitespace` `Boolean` - Remove whitespace
 - `minifyIdentifiers` `Boolean` - Shorten identifiers
 - `minifySyntax` `Boolean` - Use equivalent but shorter syntax
 - `sourcemap` `Boolean` (defaults to Webpack `devtool`) - Whether to emit sourcemaps
+- `css` `Boolean` (`false`) - Whether to minify CSS files
 - `include` `String|RegExp|Array<String|RegExp>` - Filter assets for inclusion in minification
 - `exclude` `String|RegExp|Array<String|RegExp>` - Filter assets for exclusion in minification
 

diff --git a/package.json b/package.json
@@ -38,24 +38,26 @@
 		]
 	},
 	"dependencies": {
-		"esbuild": "^0.9.2",
-		"joycon": "^2.2.5",
+		"esbuild": "^0.10.2",
+		"joycon": "^3.0.1",
 		"json5": "^2.2.0",
 		"loader-utils": "^2.0.0",
-		"type-fest": "^0.21.3",
+		"type-fest": "^1.0.1",
 		"webpack-sources": "^2.2.0"
 	},
 	"peerDependencies": {
 		"webpack": "^4.40.0 || ^5.0.0"
 	},
 	"devDependencies": {
-		"@types/jest": "^26.0.20",
-		"@types/loader-utils": "^2.0.1",
-		"@types/webpack": "^4.41.26",
+		"@types/jest": "^26.0.22",
+		"@types/loader-utils": "^2.0.2",
+		"@types/webpack": "^4.41.27",
+		"css-loader": "^5.2.0",
 		"husky": "^4.3.8",
 		"jest": "^26.6.3",
 		"lint-staged": "^10.5.4",
 		"memfs": "^3.2.0",
+		"mini-css-extract-plugin": "^1.4.0",
 		"typescript": "^4.2.3",
 		"unionfs": "^4.4.0",
 		"webpack": "^4.44.2",