CSS未包含在index.html中

问题描述

我有这个webpack.config.js：

const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = [{
entry: ['./app/clientside/app.scss','./app/clientside/app.js'],plugins: [
    new HtmlWebpackPlugin({
        title: 'Caching',}),],output: {
path: __dirname + '/private_html/_app/dist',publicPath: '',filename: '[contenthash].bundle.js'
},module: {
rules: [
  {
    test: /\.scss$/,use: [
      {
        loader: 'file-loader',options: {
          name: '[contenthash].bundle.css',},{ loader: 'extract-loader' },{ loader: 'css-loader' },{ loader: 'postcss-loader',options: {
                         plugins: () => [autoprefixer()]
                    }
                },{
                    loader: 'sass-loader',options: {
                        implementation: require('sass'),sassOptions: {
                            includePaths: ['./node_modules']
                        }
                    }
                },]
  },{
        test: /\.js$/,exclude: /node_modules/,use: ['babel-loader'],] },}];

会生成css和js文件，但在index.html中仅包含js文件：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Caching</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<script src="dd9a13efe757661de1fe.bundle.js"></script>
</body>
</html>

我希望有链接元素引用css文件。我尝试了google，但似乎找不到正确的方向/关键字。我该如何解决？

解决方法

为此，我可能会考虑使用[MiniCssExtractPlugin] [1]，它与HtmlWebpackPlugin一起，将使您能够在HTML文件中获取指向CSS文件的链接标记。

我引用了HtmlWebpackPlugin [documentation] [2]：

如果webpack的输出中有任何CSS资产（例如，用MiniCssExtractPlugin提取的CSS），则这些资产将包含在生成的HTML元素中的标记中。

您还可以查看此SO [answer] [3]，它提出了一些其他方法来内嵌HTML中的CSS。

如果需要，可以共享一个指向您项目的链接，我可以尝试为您提供更具体的帮助。 [1]：https://webpack.js.org/plugins/mini-css-extract-plugin/ [2]：https://webpack.js.org/plugins/html-webpack-plugin/ [3]：https://stackoverflow.com/a/50770543/6098812

html-webpack-plugin webpack webpack

CSS未包含在index.html中

问题描述

解决方法

相关问答