如何使用 webpack 将 css 链接移动到 html 文档的底部? [英] How to move css links to the bottom of the html document with webpack?

查看：27 发布时间：2021/9/23 19:11:31 webpack webpack-4 css-loader html-webpack-plugin

本文介绍了如何使用 webpack 将 css 链接移动到 html 文档的底部?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的 webpack 当前设置的方式是将 css 资源链接放在文档的头部，这会阻止我的初始内容的呈现.

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.

示例:

<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?

这是我的一些 webpack 配置:

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)
    })
  ])
};

这是我的 html(ejs) 模板，以防万一:

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>

如何使用 webpack 将 css 链接移动到 html 文档的底部? [英] How to move css links to the bottom of the html document with webpack?

问题描述

推荐答案

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

如何使用 webpack 将 css 链接移动到 html 文档的底部? [英] How to move css links to the bottom of the html document with webpack?

问题描述

推荐答案

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭