Question

如何使用 webpack 将 css 链接移动到 html 文档的底部？

2019-07-12

1270

webpack webpack-4 css-loader html-webpack-plugin

目前我的 webpack 设置方式是将 css 资源链接放在文档的头部，这会阻止我初始内容的渲染。

示例：

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

因此，我想将它们移动到文档底部，就在 </body> 之前。

有没有办法配置我已经拥有的内容来实现这一点，或者是否有我找不到的插件？

以下是我的部分 webpack 配置：

{{
  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) 模板，以防万一：

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

Answer 1

首先，我很好奇您的意图。根据提供的示例代码，您似乎主要关心的是转换 SCSS 文件，并将结果放在 HTML 文件中。如果您只关心这些，我建议您阅读这篇文章。可能有更好的文章，但它在 Google 上排名最高，所以就这样吧。

如果您的示例代码为了简洁而被精简 - 或者您只是真的想使用 Webpack 来转换单个 SCSS 文件 - 我建议您阅读插件的选项文档。

但基于您在此处的评论，以及您打开此问题的事实，我感觉您没有想要阅读文档 - 因此， inject 属性似乎是您需要设置为 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

可以在此处的示例文件夹中找到将 inject 设置为 false 时如何访问文件的示例。

Answer 2

对于任何搜索的人，请尝试这个插件，它使您的款式放在底部并将其放在<<<<代码> rel =“ preload” 属性