Возможно ли, чтобы html-webpack-plugin генерировал <style>элементов из css? - PullRequest
Новая
       11

Возможно ли, чтобы html-webpack-plugin генерировал <style>элементов из css?

0 голосов
/ 09 июня 2018

У меня есть статический сайт, на котором я использую Vue и Webpack.

У меня есть несколько глобальных правил CSS в файле с именем style.css, и я импортирую их, используя import './styles.css' из моего index.jsфайл.Кроме того, у меня есть несколько .vue файлов, которые генерируют свой собственный CSS.

Для генерации HTML-страницы я использую html-webpack-plugin.

Кажется, что мои правила CSS применяются правильно.Однако теги <style>, которые их содержат, динамически добавляются в <head> моей страницы через Javascript, который генерирует Webpack.Я бы предпочел, чтобы эти теги <style> отображались статически в сгенерированном файле 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 Ответ

0 голосов
/ 09 июня 2018

Похоже на точное использование этих плагинов html-webpack:

Позволяет встроить исходный код javascript и css.

Если вы используете HtmlWebpackPlugin и ExtractTextPlugin в ваших сборках Webpack для создания HTML <link> s во внешних файлах таблиц стилей, добавьте этот плагин для преобразования ссылок в `~ элементы, содержащие внутренние (иногда неправильно называемые'in-line') CSS.

Преобразование внешней таблицы стилей (<link rel="stylesheet"/>) во внутреннюю таблицу стилей (<style>...<style/>).Требуется mini-css-extract-plugin и html-webpack-plugin

Последние 2 плагина HTML-пакета зависят от одного из следующих плагинов веб-пакета:

Извлечение текста из пакета или пакетов в отдельный файл.[...] Он перемещает все необходимые *.css модули в чанках ввода в отдельный файл CSS.Таким образом, ваши стили больше не встроены в комплект JS, а находятся в отдельном файле CSS (styles.css).

Этот плагин извлекает CSS в отдельные файлы.

...