我有这个 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-element 引用 css 文件。我尝试过谷歌，但似乎找不到正确的方向/关键字。我该如何解决这个问题？
我可能会考虑使用 [MiniCssExtractPlugin][1] 来实现此目的，它与 HtmlWebpackPlugin 一起，将允许您获取 HTML 文件中的链接标记，指向您的 CSS 文件。
我引用 HtmlWebpackPlugin [文档][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
就我而言，我在 Webpack 配置文件中设置了
publicPath: '/'