代码之家 › 专栏 › 技术社区 › Adrian

是否可以让html网页包插件从css生成<style>元素?

html-webpack-plugin vue.js webpack css javascript

Adrian · 技术社区 · 6 年前

我有一个静态网站,我在那里使用vue和webpack。

我在一个名为 style.css 我是通过使用 import './styles.css' 从我 index.js 文件。另外,我还有一些 .vue 生成自己css的文件。

为了生成html页面,我使用 html-webpack-plugin .

我的css规则似乎应用正确。然而, <style> 包含它们的标记将动态添加到 <head> 通过webpack生成的javascript访问我的页面。我想要这些 <风格& GT; 在生成的 index.html 改为归档。有什么办法可以做到这一点吗?

另外,如果可能的话,我希望css被缩小。

这是我的网页包配置文件:

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'
};

1 回复 | 直到 6 年前

ghybs 6 年前

听起来像是这些HTML网页包插件的确切用例:

html-webpack-inline-source-plugin :

它允许您内嵌javascript和css源代码。

style-ext-html-webpack-plugin :上一个的替代品。

如果在Webpack生成中使用htmlWebpackPlugin和ExtractTextPlugin创建HTML <link> 对于外部样式表文件,添加此插件以将链接转换为包含内部(有时错误地称为“in-line”)css的`~元素。

html-inline-css-webpack-plugin :样式扩展HTML网页包插件的替代方法。

转换外部样式表( <link rel="stylesheet"/> )到内部样式表( <style>...<style/> )需要小型css提取插件和html网页包插件

最后两个HTML Webpack插件依赖于以下Webpack插件之一:

Extract Text Plugin :

将一个或多个捆绑包中的文本提取到单独的文件中。[…]它移动所有需要的 *.css 模块分块进入一个单独的css文件。因此,您的样式不再内联到js包中,而是在一个单独的css文件中。( styles.css )

mini-css-extract-plugin :与Extract Text Plugin相同,但适用于Webpack v4。

这个插件将css提取到单独的文件中。