html-webpack-plugin是否可以生成< style>CSS元素? [英] Is it possible to have html-webpack-plugin generate <style> elements from css?
问题描述
我有一个静态网站，正在使用Vue和Webpack.
I have a static site where I am using Vue and Webpack.
我在名为 style.css 的文件中有一些全局CSS规则，并且正在使用 import'./styles.css'从我的index.js 文件.此外，我还有一些 .vue 文件，它们会生成自己的CSS.
I have some global CSS rules in a file called style.css and I am importing them by using import './styles.css' from my index.js file. Additionally, I have some .vue files which generate their own CSS.
要生成HTML页面，我正在使用 html-webpack-plugin .
To generate the HTML page, I am using html-webpack-plugin.
我的CSS规则似乎正确适用.但是，包含它们的< style> 标记会通过Webpack生成的Javascript动态添加到我页面的< head> 中.我希望这些< style> 标记可以静态地静态显示在生成的 index.html 文件中.有什么办法可以做到这一点?
My CSS rules appear to be applying correctly. However, the <style> tags which contain them are dynamically being added to the <head> of my page via the Javascript that Webpack generates. I would prefer these <style> tags to appear statically in the generated index.html file instead. Is there any way to achieve this?
此外，如果可能的话，我希望将CSS缩小.
Additionally, if possible, I would like the CSS to be minified.
这是我的webpack配置文件:
This is my webpack configuration file:
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插件的确切用例:
Sounds like the exact use case for these html-webpack plugins:
它允许您内嵌javascript和CSS源代码.
It allows you to embed javascript and css source inline.
style-ext-html-webpack-plugin :是上一个的替代.
如果您在Webpack版本中使用HtmlWebpackPlugin和ExtractTextPlugin来创建指向外部样式表文件的HTML
< link>，请添加此插件以将链接转换为包含内部元素的〜元素(有时被错误地称为'in-line')CSS.
If you use HtmlWebpackPlugin and ExtractTextPlugin in your Webpack builds to create HTML
<link>s to external stylesheet files, add this plugin to convert the links to `~ elements containing internal (sometimes incorrectly called 'in-line') CSS.
html-inline-css-webpack-plugin :替代style-ext-html-webpack-plugin.
html-inline-css-webpack-plugin: an alternative to style-ext-html-webpack-plugin.
将外部样式表(
< link rel ="stylesheet"/>)转换为内部样式表(< style> ...< style/> ).需要mini-css-extract-plugin和html-webpack-plugin
Convert external style sheet(
<link rel="stylesheet"/>) to internal style sheet(<style>...<style/>). Require mini-css-extract-plugin and html-webpack-plugin
最后2个HTML Webpack插件取决于以下Webpack插件之一:
The last 2 HTML webpack plugins depend on one of the following webpack plugins:
将一个或多个捆绑包中的文本提取到一个单独的文件中.[...]它将条目块中所有必需的
*.css模块移动到单独的CSS文件中.因此，您的样式不再内联到JS捆绑包中，而是在一个单独的CSS文件(styles.css)中.
Extract text from a bundle, or bundles, into a separate file. [...] It moves all the required
*.cssmodules in entry chunks into a separate CSS file. So your styles are no longer inlined into the JS bundle, but in a separate CSS file (styles.css).
mini-css-extract-plugin :与提取文本插件"相同，但适用于webpack v4.
mini-css-extract-plugin: same as Extract Text Plugin, but for webpack v4.
此插件将CSS提取到单独的文件中.
This plugin extracts CSS into separate files.
这篇关于html-webpack-plugin是否可以生成< style>CSS元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
