Я хотел бы получить CSS-файл, который представляет собой объединенную и минимизированную версию стандартных CSS-файлов моих сред разработки.С хэшированным именем, основанным на содержимом файла, который автоматически добавляется в качестве тега в мой итоговый файл index.html в моей папке распространения.
Возможно ли это?Я предполагаю, что так как я получил Webpack 4, чтобы делать почти все остальное, что мне нужно было сделать.Если это так, как бы я поступил об этом?
Имейте в виду, это должно быть настроено таким образом.Мне не разрешено использовать операторы импорта и т. П. В моем JS.
Я пытался поиграть с плагином Mini Css Extract и плагином Optimize CSS Assets Webpack, чтобы посмотреть, могут ли они делать то, что я хочу, но яЯ, скорее всего, делаю что-то не так, так как я никогда не получаю никакого выходного файла (я знаю, что он не даст мне модифицированный index.html, но наличие файла CSS будет, по крайней мере, началом).
Моя текущая структура файла в основном: 'mainFolder' / public / css <- папка src css, 'mainFolder' / dist / css <- папка dist, в которую я хочу поместить минимизированный файл </p>
Моя конфигурация в настоящее время настроена следующим образом:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: [
'./public/js/app.js',
'./public/js/filters/weekday.js',
'./public/js/filters/dial-in.js',
'./public/js/filters/time.js',
'./public/js/filters/group-member.js',
'./public/js/filters/bool-to-icon.js',
'./public/js/filters/date-format.js',
'./public/js/filters/time-format.js',
'./public/js/services/main.js',
'./public/js/configs/config.js',
'./public/js/controllers/main.js',
'./public/js/pages/calendar/controller.js',
'./public/js/pages/company/view/controller.js',
'./public/js/pages/company/edit/controller.js',
'./public/js/pages/group-meeting/create/controller.js',
'./public/js/pages/group-meeting/detail/controller.js',
'./public/js/pages/group-meeting/view/controller.js',
'./public/js/pages/group-meeting-calendar/controller.js',
'./public/js/pages/login/controller.js',
'./public/js/pages/meeting-link/view/controller.js',
'./public/js/pages/meeting-link/edit/controller.js',
'./public/js/pages/meeting-link/detail/controller.js',
'./public/js/pages/user/view/controller.js',
'./public/js/pages/user/edit/controller.js',
'./public/js/lib/angular-semantic-ui.min.js'
],
output: {
filename: 'js/[contenthash].js',
path: path.resolve(__dirname, 'dist'),
publicPath: 'dist'
},
devtool: 'source-map ',
plugins: [
new CleanWebpackPlugin(['dist'], {
}),
new HtmlWebpackPlugin({
title: 'Zenvite',
template: './public/templates/index.html',
filename: 'templates/index.html'
}),
new CopyWebpackPlugin([
//{ from: 'public/css', to:'css'},
{ from: 'public/media', to:'media'},
{ from: 'public/js/pages', to: 'js/pages', ignore: [ '*.js' ]},
{ from: 'public/templates/app.html', to: 'templates'}
]),
new MiniCssExtractPlugin({
filename: 'app.css',
chunkFilename: '[contenthash].css',
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it use publicPath in webpackOptions.output
publicPath: '../public'
}
},
"css-loader"
]
}
]
},
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
}
}
}
},
};
Опять же, оптимальный результат будет иметь что-то вроде [contenthash] .css с объединенными и свернутыми версиями моего стандартного CSS и, если возможно, с добавленнымтег в моем файле index.html.Пока что у меня нет ничего подобного (за исключением копирования стандартных файлов в каталог dist)
Заранее благодарен за любую помощь и, если я могу ответить на любые вопросы, не стесняйтесь спрашивать.