How to move css links to the bottom of the html document with webpack?

问题

The way my webpack is currently being set up, it places the css resources links in the head of the document, which blocks the rendering of my initial content.

Example:

<head>
   <link href="main.28396255e7678a2cdf3c.css" rel="stylesheet">
</head>

Therefore, I'd like to move them at the bottom of the document, right before </body>.

Is there a way to configure what I already have, to achieve this, or is there maybe a plugin I wasn't able to find?

Here's some of my webpack config:

{{
  entry: {
    app: [
      './styles/main.scss',
    ]
  },
  module: {
    rules: [
      {
        test: /main.scss$/,
        use: [
          {loader: MiniCssExtractPlugin.loader, options: {hmr: isActiveDevelopment}},
          'css-loader?sourceMap',
          {loader: 'postcss-loader', options: {sourceMap: true, ident: 'postcss', plugins: () => [postcssPresetEnv({browsers: 'last 20 versions'})]}},
          'sass-loader?sourceMap',
          'import-glob',
        ],
      },
    ]
  },
  plugins: removeEmpty([
    new MiniCssExtractPlugin({
      filename: ifOptimized('[name].[chunkhash].css', '[name].css'),
    }),
    new HtmlWebpackPlugin({
      template: './app.ejs',
      filename: indexHtml,
      chunksSortMode: (a, b) => scriptsOrder.indexOf(a.names[0]) > scriptsOrder.indexOf(b.names[0]),
      env: {isProd, isWeb, isHybrid},
      config: createConfig(ifWeb, ifHybrid, ifProd, ifDev)
    })
  ])
};

Here's my html(ejs) template, just in case:

<!DOCTYPE html>
<html lang="en" class="noOverflow">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <meta name="description" content="description">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no">
    <% if (htmlWebpackPlugin.options.env.isWeb) { %>
    <link rel="manifest" href="/manifest.json">
    <base href="/">
    <% } else if (htmlWebpackPlugin.options.env.isHybrid) { %>
    <script type="text/javascript" src="cordova.js"></script>
    <% } %>
</head>
<body>
<noscript>How do we put this.. Your browser does not support JavaScript o_O</noscript>
<% if (htmlWebpackPlugin.options.env.isWeb) { %>
<%- require('!html-loader!./splash/splash.html') %>
<% } %>
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700&subset=cyrillic" rel="stylesheet">
<link rel="preload" href="<%- htmlWebpackPlugin.options.config.staticUrl %>/common/mk" as="fetch" type="application/json" crossorigin>
<link href="<%- htmlWebpackPlugin.files.chunks.app.css[0] %>" rel="stylesheet">
</body>
</html>

回答1:

First off, I'm curious about your intent. Based on the example code provided it looks like you're mainly concerned with just transpiling an SCSS file, and being able to place the result in an HTML file. If that's all you care about I'd suggest reading this article. There may be better articles out there, but it was ranked highest on Google, so there yuh go.

If your example code was trimmed down for brevity - or you just really want to use Webpack to transpile a single SCSS file - I'd suggest you read the documentation for the options of the plugin.

But based on your comment here, and the fact that you opened this issue, I'm getting the feeling you don't want to read the documentation - so, the inject property seems to be what you need to set to false.

true || 'head' || 'body' || false

Inject all assets into the given template or templateContent. When passing true or 'body' all javascript resources will be placed at the bottom of the body element. 'head' will place the scripts in the head element

An example of how to access the files when setting inject to false can be found here, in their examples folder.

回答2:

for anyone searching, try this plugin, its puts your stylesheet at the bottom and puts the rel="preload" property

来源：https://stackoverflow.com/questions/57004003/how-to-move-css-links-to-the-bottom-of-the-html-document-with-webpack

标签

Webpack

webpack-4

css-loader

html-webpack-plugin