Я использую 2 файла ввода, startpage.js
и subpage.js
, и успешно назначаю их своим html файлам с помощью параметра HTMLWebpackPlugin
s chunks.
Но так как это решение требует включения css файлов в startpage.js
и subpage.js
, что делает «удвоение проблемы» (по крайней мере, в процессе сборки), я решил создать другой файл, app_head
, и поместить оператор import 'main.css'
там. (И у меня также есть файл vendor
, который должен быть помещен в заголовок HTML, что должно произойти путем добавления _head
в соответствии с документацией: https://github.com/thearchitgarg/html-webpack-injector
- но это тоже не работает ...)
Это текущая конфигурация веб-пакета (отрывок):
module.exports = {
entry: {
app_head: './src/css/main.css',
vendor_head: './src/scripts/vendor/_all_vendor.js',
startpage: './src/scripts/startpage.js',
subpage: './src/scripts/subpage.js',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, '../public'),
publicPath: '/'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/templates/index.ejs',
chunks: ['app_head', 'vendor_head', 'startpage'],
chunksConfig: {
defer: ['startpage']
},
excludeChunks: ['subpage'],
bodyCss: 'is-startpage',
}),
new HtmlWebpackPlugin({
filename: 'publication.html',
template: './src/templates/publication.ejs',
chunks: ['subpage'],
chunksConfig: {
defer: ['subpage']
},
excludeChunks: ['startpage'],
bodyCss: 'is-subpage',
}),
[...]
app_head.css
правильно размещен в разделе заголовка HTML, но также генерирует бесполезный app_head.js
, который содержит только код веб-пакета. К сожалению, я не знаю ни одного способа, как исключить этот файл, не исключая также css.
. Есть ли лучший способ отделить процесс генерации css без дополнительных затрат или мусора?