Я делаю переход от grunt к webpack.Я пытаюсь сделать то же самое, что и с grunt:
- Очистить выходную папку, удалить файл scss с размерами и координатами, сгенерированными webpack-spritesmith (clean-webpack-plugin))
- Копирование статических изображений в выходную папку (copy-webpack-plugin)
- Создание спрайта со всеми значками (webpack-spritesmith)
- Сжатие спрайта (файл-loader, image-webpack-loader)
- Копировать шрифты в выходную папку (file-loader)
- Компилировать sass (sass-loader, postcss-loader, postcss-preset-env, mini-css-extract-plugin)
Это мой конфиг:
module.exports = {
context: path.resolve(__dirname, '<PATH_CONTEXT>'),
mode: 'development',
entry: {
index: './index.js'
},
resolve: {
modules: ['node_modules', '<PATH_RESOLVE_1>', '<PATH_RESOLVE_1>']
},
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{ loader: 'postcss-loader', options: { plugins: [ new PostCssPresetEnv() ] } },
'sass-loader'
]
},
{
test: /\.png$/,
use: [
{ loader: 'image-webpack-loader', options: { (...) } },
{ loader: 'file-loader', options: { (...) } }
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
publicPath: '<PATH_PUBLIC>',
outputPath: '<PATH_OUTPUT>'
}
}
]
}
]
},
plugins: [
new CleanWebpackPlugin([ (...) ]),
new CopyWebpackPlugin([ (...) ]),
new SpritesmithPlugin({ (...) }),
new MiniCssExtractPlugin({ filename: '<PATH_CSS_EXTRACT>/[name].css'
})
],
output: {
filename: '<PATH_BUNDLE>/[name].js',
path: path.resolve(__dirname, '<PATH_OUTPUT>')
}
}
У меня одна проблема с webpack-spritesmith.Этот плагин всегда генерирует нормальную версию изображения, сетчатка является необязательной;Я не использую нормальное изображение, просто версию сетчатки.Я называю их sprite-normal.png и sprite.png.
Дело в том, что мне не нужна версия sprite-normal.png.Я попытался найти плагин, который позволяет мне выполнить что-то, когда пакет полностью обработан.Это подходящее время для удаления sprite-normal.png.Я ничего не нашел ...
Я пытался добавить экземпляр CleanWebpackPlugin сразу после SpritesmithPlugin в массив плагинов:
plugins: [
new CleanWebpackPlugin([ (...) ]),
new CopyWebpackPlugin([ (...) ]),
new SpritesmithPlugin({ (...) }),
new CleanWebpackPlugin([ '<PATH>/sprite-normal.png' ]),
new MiniCssExtractPlugin({ filename: '<PATH_CSS_EXTRACT>/[name].css' })
]
Не работает, похоже, что SpritesmithPluginасинхронно, выходные сообщения плагинов показывают, что добавленный CleanWebpackPlugin выполняется до генерации спрайтов:
clean-webpack-plugin: /static has been removed.
clean-webpack-plugin: /<PATH_1>/sprite.scss has been removed.
clean-webpack-plugin: /<PATH_2>/sprite-normal.png has been removed.
webpack-spritesmith generated files
images:
<PATH_2>/sprite-normal.png
<PATH_2>/sprite.png
api:
<PATH_1>/sprite.scss
У меня два вопроса:
Как я могувыполнить какой-нибудь код после того, как весь процесс связывания закончен?Любой плагин?Создать плагин, играющий с хуками (afterEmit и т. Д.) - вариант?
Если webpack-spritesmith работает асинхронно, нужно ли беспокоиться о том, что он не завершится, когда webpack перейдет к входу?У меня нет проблем с этим, процесс компиляции scss находит scss, сгенерированный webpack-spritesmith без проблем.Сжатие сгенерированного sprite.png также выполнено успешно.Веб-пакет начинает обрабатывать записи, когда плагины полностью выполнены?
Спасибо