我有一个静态网站，正在使用Vue和Webpack。
我在名为style.css的文件中有一些全局CSS规则，并且正在使用import './styles.css'文件中的index.js导入它们。此外，我还有一些.vue文件，它们会生成自己的CSS。
要生成HTML页面，我正在使用html-webpack-plugin。
我的CSS规则似乎正确应用。但是，包含它们的<style>标记将通过Webpack生成的Javascript动态添加到我页面的<head>中。我希望这些<style>标记可以静态地出现在生成的index.html文件中。有什么办法可以做到这一点？
另外，如果可能的话，我希望将CSS缩小。
这是我的webpack配置文件:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
}),
new VueLoaderPlugin()
],
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
mode: 'development'
};
最佳答案
听起来像这些html-webpack插件的确切用例:
最后2个HTML Webpack插件取决于以下Webpack插件之一:
关于javascript - html-webpack-plugin是否可以从CSS生成<style>元素？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50768575/