html-webpack-plugin About v5 version js will be inserted in front of css by default

Hello, when we upgraded from v4 to v5, we found that the default location for inserting js has changed. Can you tell me why this change was made

v4: v5: webpack config: `const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = { mode: "production", entry: ["./src/index.js"], output: { filename: "[name].[hash:8].js", clean: true, }, module: { rules: [ { test: /.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"], exclude: /node_modules/, }, { test: /.js$/, use: ["babel-loader"], exclude: /node_modules/, }, ], }, optimization: { splitChunks: { cacheGroups: { commons: { test: /[\/]node_modules[\/]/, name: "vendors", chunks: "all", }, }, }, }, plugins: [ new HtmlWebpackPlugin(), new MiniCssExtractPlugin(), ], }; `

Feb 08 '23 02:02 fengluoX

We find that in this case, js will execute parsing earlier than css, which is particularly obvious when js reads from memory

Feb 08 '23 02:02 fengluoX

@fengluoX

@风落X

To have full control over all CSS and JS files in generated HTML you can try to use the html-bundler-webpack-plugin.

要完全控制生成的HTML中的所有CSS和JS文件，您可以尝试使用html-bundler-webpack-plugin。

Using this plugin you can specify source script and style files directly in HTML.

使用这个插件你可以直接在HTML中指定源脚本和样式文件。

For example, there is ./src/views/index.html:

例如，有。/源代码/视图/索引. html：
<html>
<head>
  
  <link href="./style.scss" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
  
  <script src="./main.js" defer="defer"></script>
</body>
</html>
In the generated HTML, all tags remain in their places:

在生成的HTML中，所有标记都保留在原来的位置：
<html>
<head>
  <link href="css/style.05e4dd86.css" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
  
  <script src="js/runtime.9f40bbd4.js"></script>
  <script src="js/vendor.bd49f40b.js"></script>
  <script src="js/main.f4b855d8.j"></script>
</body>
</html>
Webpack config:

网络包配置：
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

module.exports = {
  mode: 'production',
  output: {
    clean: true,
  },
  plugins: [
    new HtmlBundlerPlugin({
      entry: {
        // define all your templates here, the entry-syntax is the same as Webpack entry
        index: 'src/views/index.html', // => dist/index.html
        'pages/about': 'src/views/about/index.html', // => dist/pages/about.html
        // ...
      },
      js: {
        // output filename of extracted JS from source script loaded in HTML via `<script>` tag
        filename: 'js/[name].[contenthash:8].js',
      },
      css: {
        // output filename of extracted CSS from source style loaded in HTML via `<link>` tag
        filename: 'css/[name].[contenthash:8].css',
      },
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(css|sass|scss)$/,
        use: ['css-loader', 'sass-loader'],
        exclude: /node_modules/,
      },
      {
        test: /.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/,
      },
    ],
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\/]node_modules[\/]/.+\.(js|ts)$/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};
Note: the html-bundler-webpack-plugin replace functionality of many plugins and loaders such as:

注意：html-bundler-webpack-plugin替代了许多插件和加载程序的功能，例如：

html-webpack-plugin html网页包插件

mini-css-extract-plugin 迷你css提取插件

The details see here.

详情见此处。

Thank you very much. I will consider your proposal

Feb 19 '23 02:02 fengluoX