【发布时间】：2019-07-12 09:21:22
【问题描述】：
我的 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>
【问题讨论】：
-
@GrzegorzT。你能链接你所指的 loadCSS 插件吗？
-
最后一个“look”链接指向描述如何使用它的地方以及指向插件的链接。
-
@GrzegorzT。理想情况下，我会编辑我的 webpack 配置来实现我所需要的。 loadCss 然而，它不是一个 webpack 插件，所以它需要手动工作。你知道封装它的 webpack 插件吗？
-
查看HtmlWebpackPlugin 的文档，您有预加载插件、内联样式等等。
标签： webpack webpack-4 css-loader html-webpack-plugin