Webpack资源注入配置疑问：自定义手动实现方式是否正确？

Nice work putting together this custom configuration—let's review whether it meets your requirements and spot any areas to tweak:

First, let's confirm what your setup gets right: #

• Entry configuration: You’ve correctly defined the three entry points (polyfills, vendor, app) which aligns perfectly with your file structure.
• Manual injection control: Setting inject: false in HtmlWebpackPlugin and defining custom heads/bodys options is the exact right approach to bypass default injection rules and place chunks exactly where you need them.
• CSS placement: Your template logic extracts CSS from the app chunk (part of your bodys list) and places it in the <head>, which matches your requirement to load app-related CSS in the head section.
• Script order in body: You’re loading vendor before app in the <body>, which is critical since your app code almost certainly depends on the vendor libraries bundled in vendor.ts.

Areas to adjust for robustness: #

1. Array traversal in templates
   Your current for (var chunk in ...) loops work for arrays, but they’re designed for object keys. Using array forEach is cleaner and avoids potential issues with prototype properties:

   <!-- In <head> for polyfills -->
   <% htmlWebpackPlugin.options.heads.forEach(chunkName => { %>
   <script src="<%= htmlWebpackPlugin.files.chunks[chunkName].entry %>"></script>
   <% }) %>
   
   <!-- For CSS in <head> -->
   <% htmlWebpackPlugin.options.bodys.forEach(chunkName => { %>
     <% const chunk = htmlWebpackPlugin.files.chunks[chunkName]; %>
     <% if (chunk.css && chunk.css.length) { %>
       <% chunk.css.forEach(cssPath => { %>
       <link href="<%= cssPath %>" rel="stylesheet">
       <% }) %>
     <% } %>
   <% }) %>
   
   <!-- In <body> for vendor/app scripts -->
   <% htmlWebpackPlugin.options.bodys.forEach(chunkName => { %>
   <script src="<%= htmlWebpackPlugin.files.chunks[chunkName].entry %>"></script>
   <% }) %>
   

2. Handling CSS arrays
   The css property of a chunk is always an array (even if there’s only one file). Directly outputting chunk.css will render a comma-separated string if multiple CSS files exist, which breaks the <link> tag. The forEach loop above fixes this edge case.

3. CommonsChunkPlugin validation
   Your CommonsChunkPlugin setup (name: 'vendor', chunks: ['app']) will extract shared modules from app into the vendor chunk, which is useful if your vendor.ts includes core libraries but app also imports other vendor code. Just ensure that vendor.ts already includes your main third-party dependencies to avoid redundant code duplication.

4. Public path verification
   Double-check that your publicPath: './dist/' results in correct URLs for scripts/CSS in the generated _Layout.cshtml. Since the output file is written to ../Views/Shared/_Layout.cshtml, the relative path ./dist/ should point to the correct directory, but testing the generated page will confirm this works as expected.

Final Verdict: #

Your core implementation is correct and will achieve all your desired chunk placement rules. With the minor tweaks above, you’ll make the template logic more robust and avoid edge cases that could cause issues down the line.

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