关于Parcel v2未将JS与CSS代码注入生成HTML文件的技术咨询

Hey there! Let's clear up this confusion for you as you make the jump from Parcel v1 tutorials to the newer v2 version.

Core Answer: Yes, Parcel v2's default behavior is different from v1 #

Parcel v2 does not inline JS/CSS into your HTML file by default—its standard behavior is to bundle your assets into separate hashed files (like the index.ef1c6e2b.css and index.a61d77df.js you're seeing) and update the HTML to reference those files. The inline behavior you expected is not the out-of-the-box experience for v2.

Why the v1 tutorial looked different #

The inline effect you saw in the v1 tutorial was almost certainly relying on a v1-specific plugin like parcel-plugin-inliner (which you actually have installed in your package.json!). The catch is: this plugin only works with Parcel v1—it’s completely incompatible with v2, so it’s not doing anything right now.

How to get inline JS/CSS in Parcel v2 #

If you still want your JS and CSS code injected directly into the final HTML file, here’s the straightforward v2-compatible method:

1. Add the inline attribute to your HTML imports
   Modify your index.html tags to include the inline flag:

   <script inline src="js/main.js"></script>
   <link rel="stylesheet" href="scss/main.scss" inline>
   

   Parcel v2 recognizes this attribute and will embed the full content of those files directly into the HTML instead of creating separate bundles.

2. Clean up outdated dependencies
   Uninstall the v1-only plugin since it’s no longer useful:

   npm uninstall parcel-plugin-inliner
   

3. (Optional but recommended) Use a local Parcel installation
   While you installed Parcel globally, it’s better practice to have a project-specific local version for consistency. Install it as a dev dependency:

   npm install --save-dev parcel
   

   Then update your package.json scripts to use the local version:

   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "parcel build client/index.html --no-optimize --no-cache"
   }
   

   Now you can run builds with npm run build instead of relying on the global install.

Verify the result #

After making these changes, re-run your build command. Your dist/index.html should now include the full JS and CSS code directly in <script> and <style> tags, just like you expected from the v1 tutorial.

内容的提问来源于stack exchange，提问作者OJNSim