Question

我有一个静态站点，我正在使用Vue和Webpack。

＆＃xA;＆＃xA;

我在一个名为 style.css 我正在使用 index.js 文件中的 import'./styles.css'导入它们。另外，我有一些 .vue 文件生成自己的CSS。

＆＃xA;＆＃xA; 要生成HTML页面，我使用 html- webpack-plugin 。
＆＃xA;＆＃xA; 我的CSS规则似乎正确应用。但是，包含它们的＆lt; style＆gt; 标记会通过Webpack生成的Javascript动态添加到我的页面的＆lt; head＆gt; 中。我希望这些＆lt; style＆gt; 标签在生成的 index.html 文件中静态显示。有没有办法实现这个目标？
＆＃xA;＆＃xA; 另外，如果可能的话，我希望缩小CSS。
＆＃xA;＆＃xA; <这是我的webpack配置文件：
＆＃xA;＆＃xA;   const path = require（'path'）;＆＃xA; const HtmlWebpackPlugin = require（'html-webpack -plugin'）;＆＃xA; const VueLoaderPlugin = require（'vue-loader / lib / plugin'）;＆＃xA;＆＃xA; module.exports = {＆＃xA;条目：'。/ index.js'，＆＃xA;输出：{＆＃xA; filename：'bundle.js'，＆＃xA; path：path.resolve（__ dirname，'dist'）＆＃xA; }，＆＃XA;插件：[＆＃xA;新的HtmlWebpackPlugin（{＆＃xA; template：'。/ index.html'，＆＃xA;}），＆＃xA;新的VueLoaderPlugin（）＆＃xA; ]，＆＃XA;模块：{＆＃xA;规则：[＆＃xA; {＆＃XA;测试：/\。vue $ /，＆＃xA; loader：'vue-loader'＆＃xA; }，＆＃XA; {＆＃XA;测试：/\。css $ /，＆＃xA;使用：[＆＃xA; 'VUE式装载机'，＆＃XA; 'CSS-装载机' ＆＃XA; ]＆＃XA; }＆＃XA; ]＆＃XA; }，＆＃XA;模式：'开发'＆＃xA;};＆＃xA;  ＆＃xA;

Answer 1

听起来像这些html-webpack插件的确切用例：

html-webpack-inline-source-plugin：

它允许您嵌入javascript和css源内联。

style-ext-html-webpack-plugin：替代前一个。

如果您在Webpack构建中使用HtmlWebpackPlugin和ExtractTextPlugin来创建外部样式表文件的HTML <link>，请添加此插件以将链接转换为包含内部的元素（有时被错误地称为'内联'） CSS。

html-inline-css-webpack-plugin：style-ext-html-webpack-plugin的替代品。

将外部样式表（<link rel="stylesheet"/>）转换为内部样式表（<style>...<style/>）。需要mini-css-extract-plugin和html-webpack-plugin

最后2个HTML webpack插件依赖于以下webpack插件之一：

Extract Text Plugin：

将捆绑包或捆绑包中的文本提取到单独的文件中。 [...]它将条目块中所有必需的*.css模块移动到单独的CSS文件中。因此，您的样式不再内联到JS包中，而是在单独的CSS文件（styles.css）中。

mini-css-extract-plugin：与Extract Text Plugin相同，但适用于webpack v4。

此插件将CSS提取到单独的文件中。

是否有可能让html-webpack-plugin从css生成<style>元素？

1 个答案: