jantimon/html-webpack-plugin

About v5 version js will be inserted in front of css by default

fengluoX opened this issue · 2 comments

fengluoX commented

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:
image
v5:
image
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(),
],
};
`

fengluoX commented

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

fengluoX commented

@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>
  <!-- load source styles here -->
  <link href="./style.scss" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
  <!-- load source scripts here -->
  <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>
  <!-- main split chunks -->
  <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

  • 👍1