У меня есть статический сайт, на котором я использую 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'
};
