feat(create-webpack-app): use webpack's native CSS and HTML support in init templates

[bjohansebas]

Summary

The init templates still scaffolded CSS and HTML through loaders and plugins that webpack now handles natively. This PR moves the four templates (default, react, vue, svelte) to webpack's built-in support:

• CSS: experiments.css replaces css-loader, style-loader, vue-style-loader and mini-css-extract-plugin. Sass/Less/Stylus and PostCSS are wired through type: "css/auto" rules.
• HTML: index.html becomes the entry point, handled by experiments.html, replacing html-webpack-plugin and html-loader.

Both experiments default to "auto" since webpack 5.109, so the generated configs only declare them where the auto detection would turn them off:

• a PostCSS rule for .css files registers a loader for CSS, which disables the auto default (without an explicit experiments.css: true the build fails with No parser registered for css/auto);
• the Vue template, where VueLoaderPlugin clones every non-vue rule with a catch-all resource: () => true matcher, and plugins are applied before webpack resolves the defaults, so the auto detection sees a loader for both .css and .html. The Vue template also sets experimentalInlineMatchResource in vue-loader, which that loader requires when experiments.css is enabled.

The "Do you want to extract CSS into separate files?" prompt is gone, since native CSS always emits separate files, and the htmlWebpackPlugin answer is now named html.

What kind of change does this PR introduce?

feat

Did you add tests for your changes?

The existing test/create-webpack-app/init suite covers this; its snapshots are updated for the new configs and dependency lists. Beyond the suite, I generated a project from each of the four templates and ran a production build: the emitted index.html gets the <link>/<script> tags injected and CSS is emitted as a separate file, and in the Vue app scoped SFC styles come out correctly (.sfc-test[data-v-6493cde5]).

Does this PR introduce a breaking change?

Not for existing projects, they are unaffected. Newly generated projects change: they no longer install the CSS/HTML loaders and plugins, index.html is the entry point, and the CSS extraction prompt is gone. The htmlWebpackPlugin answer key is renamed to html, which affects anyone driving the generator programmatically. Released as a minor for create-webpack-app (changeset included).

If relevant, what needs to be documented once your changes are merged or what have you already documented?

Nothing beyond the changeset in this PR.

Use of AI

Yes. I used Claude Code (Opus) to carry out the migration across the templates and generators, under my direction and step by step. Every claim in the description was verified by actually generating and building the projects rather than assumed, and I reviewed the final diff.

[changeset-bot]

🦋 Changeset detected

Latest commit: 3af8da4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
create-webpack-app	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

This PR is packaged and the instant preview is available (3af8da4).

Install it locally:

• npm

npm i -D create-webpack-app@https://pkg.pr.new/create-webpack-app@3af8da4

• yarn

yarn add -D create-webpack-app@https://pkg.pr.new/create-webpack-app@3af8da4

• pnpm

pnpm add -D create-webpack-app@https://pkg.pr.new/create-webpack-app@3af8da4

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 93.35%. Comparing base (1082235) to head (3af8da4).
⚠️ Report is 7 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4833      +/-   ##
==========================================
+ Coverage   93.32%   93.35%   +0.03%     
==========================================
  Files          14       14              
  Lines        5466     5401      -65     
  Branches      793      790       -3     
==========================================
- Hits         5101     5042      -59     
+ Misses        363      357       -6     
  Partials        2        2              

Files with missing lines	Coverage Δ
.../create-webpack-app/src/generators/init/default.ts	93.19% <100.00%> (-0.65%)	⬇️
...es/create-webpack-app/src/generators/init/react.ts	87.03% <100.00%> (+0.08%)	⬆️
...s/create-webpack-app/src/generators/init/svelte.ts	86.20% <100.00%> (-0.04%)	⬇️
...ages/create-webpack-app/src/generators/init/vue.ts	87.55% <100.00%> (+0.05%)	⬆️
packages/create-webpack-app/src/index.ts	97.16% <100.00%> (-0.02%)	⬇️

---

Continue to review full report in Codecov by Harness.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1082235...3af8da4. Read the comment docs.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.