From 04495a83c381b3b557d02c3eec5c0e51aecef001 Mon Sep 17 00:00:00 2001 From: Burhanuddin Udaipurwala Date: 2023年6月17日 12:38:33 +0530 Subject: [PATCH 1/7] docs: add docs for the css experiment --- src/content/configuration/experiments.mdx | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/content/configuration/experiments.mdx b/src/content/configuration/experiments.mdx index 4786859a4dda..85ac50e5f055 100644 --- a/src/content/configuration/experiments.mdx +++ b/src/content/configuration/experiments.mdx @@ -184,6 +184,28 @@ Detect changes to remote resources and upgrade them automatically. Enable native CSS support. Note that it's an experimental feature still under development and will be enabled by default in webpack v6, however you can track the progress on [GitHub](https://github.com/webpack/webpack/issues/14893). +- Type: + + - `boolean` + - `CssExperimentOptions` + + ```ts + { + exportsOnly?: boolean; + } + ``` + +Experimental features: + +- Inbuilt support for CSS and CSS Modules. Use the `.module.css` extension for CSS Modules. +- Style-specific fields resolution in `package.json` files: + webpack will look for `style` field in `package.json` files and use that if it + exists for imports inside CSS files. + +#### experiments.css.exportsOnly + +Avoid generating and loading a stylesheet and only embed exports from css into output javascript files. + - Type: `boolean` ### experiments.cacheUnaffected From 1751991cb7137aec2203385f4e5a84c8228ed4ba Mon Sep 17 00:00:00 2001 From: Burhanuddin Udaipurwala Date: 2023年6月20日 19:57:58 +0530 Subject: [PATCH 2/7] docs: add experimental features --- src/content/configuration/experiments.mdx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/content/configuration/experiments.mdx b/src/content/configuration/experiments.mdx index 85ac50e5f055..a50fd8bca699 100644 --- a/src/content/configuration/experiments.mdx +++ b/src/content/configuration/experiments.mdx @@ -197,10 +197,15 @@ Enable native CSS support. Note that it's an experimental feature still under de Experimental features: -- Inbuilt support for CSS and CSS Modules. Use the `.module.css` extension for CSS Modules. -- Style-specific fields resolution in `package.json` files: +- CSS Modules support: webpack will generate a unique name for each CSS class. Use the `.module.css` extension for CSS Modules. +- Style-specific fields resolution in `package.json` files : webpack will look for `style` field in `package.json` files and use that if it exists for imports inside CSS files. +- Content hash for CSS files: webpack will generate a content hash for CSS files + and use it in the filename. This is useful for long-term caching. +- CSS extraction: Webpack will extract CSS into a separate file. This functionality replaces the need for `mini-css-extract-plugin` and `css-loader`, as it provides native support. +- CSS imports: webpack will inline CSS imports into the generated CSS file. +- Hot Module Reload (HMR): webpack supports HMR for CSS files. This means that changes made to CSS files will be reflected in the browser without a full page reload. #### experiments.css.exportsOnly From 19db5630eadcb15d0be7d19f49727af7011b6e49 Mon Sep 17 00:00:00 2001 From: Burhanuddin Udaipurwala Date: 2023年6月20日 19:58:22 +0530 Subject: [PATCH 3/7] docs: fix badge --- src/content/configuration/experiments.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/configuration/experiments.mdx b/src/content/configuration/experiments.mdx index a50fd8bca699..18c8775a8fcb 100644 --- a/src/content/configuration/experiments.mdx +++ b/src/content/configuration/experiments.mdx @@ -198,7 +198,7 @@ Enable native CSS support. Note that it's an experimental feature still under de Experimental features: - CSS Modules support: webpack will generate a unique name for each CSS class. Use the `.module.css` extension for CSS Modules. -- Style-specific fields resolution in `package.json` files : +- Style-specific fields resolution in `package.json` files: webpack will look for `style` field in `package.json` files and use that if it exists for imports inside CSS files. - Content hash for CSS files: webpack will generate a content hash for CSS files From 4c5bae0849c246948a81828faad84d7311dd5cd1 Mon Sep 17 00:00:00 2001 From: Burhanuddin Udaipurwala Date: 2023年6月21日 20:03:41 +0530 Subject: [PATCH 4/7] docs: add name to contributor list --- src/content/configuration/experiments.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/configuration/experiments.mdx b/src/content/configuration/experiments.mdx index 18c8775a8fcb..cbc9d7dc3bd8 100644 --- a/src/content/configuration/experiments.mdx +++ b/src/content/configuration/experiments.mdx @@ -7,6 +7,7 @@ contributors: - chenxsan - anshumanv - snitin315 + - burhanuday --- ## experiments From fb52f7900d77a884793638f7b9868c70b559f215 Mon Sep 17 00:00:00 2001 From: Burhanuddin Udaipurwala Date: 2023年6月23日 22:13:09 +0530 Subject: [PATCH 5/7] docs: remove line break --- src/content/configuration/experiments.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/content/configuration/experiments.mdx b/src/content/configuration/experiments.mdx index cbc9d7dc3bd8..28ce0c31f221 100644 --- a/src/content/configuration/experiments.mdx +++ b/src/content/configuration/experiments.mdx @@ -202,8 +202,7 @@ Experimental features: - Style-specific fields resolution in `package.json` files: webpack will look for `style` field in `package.json` files and use that if it exists for imports inside CSS files. -- Content hash for CSS files: webpack will generate a content hash for CSS files - and use it in the filename. This is useful for long-term caching. +- Content hash for CSS files: webpack will generate a content hash for CSS files and use it in the filename. This is useful for long-term caching. - CSS extraction: Webpack will extract CSS into a separate file. This functionality replaces the need for `mini-css-extract-plugin` and `css-loader`, as it provides native support. - CSS imports: webpack will inline CSS imports into the generated CSS file. - Hot Module Reload (HMR): webpack supports HMR for CSS files. This means that changes made to CSS files will be reflected in the browser without a full page reload. From e54422833041ea71522b2d996bcdfab5fedbf632 Mon Sep 17 00:00:00 2001 From: Burhanuddin Udaipurwala Date: 2023年6月23日 22:16:03 +0530 Subject: [PATCH 6/7] docs: make webpack lowercase --- src/content/configuration/experiments.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/configuration/experiments.mdx b/src/content/configuration/experiments.mdx index 28ce0c31f221..9900f960a182 100644 --- a/src/content/configuration/experiments.mdx +++ b/src/content/configuration/experiments.mdx @@ -203,7 +203,7 @@ Experimental features: webpack will look for `style` field in `package.json` files and use that if it exists for imports inside CSS files. - Content hash for CSS files: webpack will generate a content hash for CSS files and use it in the filename. This is useful for long-term caching. -- CSS extraction: Webpack will extract CSS into a separate file. This functionality replaces the need for `mini-css-extract-plugin` and `css-loader`, as it provides native support. +- CSS extraction: webpack will extract CSS into a separate file. This functionality replaces the need for `mini-css-extract-plugin` and `css-loader`, as it provides native support. - CSS imports: webpack will inline CSS imports into the generated CSS file. - Hot Module Reload (HMR): webpack supports HMR for CSS files. This means that changes made to CSS files will be reflected in the browser without a full page reload. From f0bf7b1286c9197481847cdcd4ceccfa4e490491 Mon Sep 17 00:00:00 2001 From: Burhanuddin Udaipurwala Date: 2023年6月23日 22:25:41 +0530 Subject: [PATCH 7/7] docs: add example of bootstrap with style field resolution --- src/content/configuration/experiments.mdx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/content/configuration/experiments.mdx b/src/content/configuration/experiments.mdx index 9900f960a182..78ee14be708e 100644 --- a/src/content/configuration/experiments.mdx +++ b/src/content/configuration/experiments.mdx @@ -202,6 +202,9 @@ Experimental features: - Style-specific fields resolution in `package.json` files: webpack will look for `style` field in `package.json` files and use that if it exists for imports inside CSS files. + + For example, if you add `@import 'bootstrap';` to your CSS file, webpack will look for `bootstrap` in `node_modules` and use the `style` field in `package.json` from there. If `style` field is not found, webpack will use the `main` field instead to preserve backward compatibility. + - Content hash for CSS files: webpack will generate a content hash for CSS files and use it in the filename. This is useful for long-term caching. - CSS extraction: webpack will extract CSS into a separate file. This functionality replaces the need for `mini-css-extract-plugin` and `css-loader`, as it provides native support. - CSS imports: webpack will inline CSS imports into the generated CSS file.

AltStyle によって変換されたページ (->オリジナル) /