CSS 未包含在 index.html 中

Question

我有这个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>

我希望有 link 元素引用 css 文件。我试过 google 但似乎找不到正确的方向/关键字。我该如何解决这个问题？

Answer 1

我可能会考虑为此目的使用 [MiniCssExtractPlugin][1]，它与 HtmlWebpackPlugin 一起允许您在 HTML 文件中获取 link 标记，指向您的 CSS 个文件。

我引用自 HtmlWebpackPlugin [文档][2]:

If you have any CSS assets in webpack's output (for example, CSS extracted with the MiniCssExtractPlugin) then these will be included with tags in the element of generated HTML.

您还可以查看此 SO [answer][3]，它建议了一些在 HTML 中内联 CSS 的其他方法。

如果你愿意，你可以分享一个link到你的项目，我可以尝试更具体地帮助你。 [1]: https://webpack.js.org/plugins/mini-css-extract-plugin/ [2]: https://webpack.js.org/plugins/html-webpack-plugin/ [3]:

CSS 未包含在 index.html 中

CSS not included in index.html

webpack

html-webpack-plugin