Плагины Webpack выполнены до разбора записей - PullRequest
0 голосов
/ 26 ноября 2018

Я делаю переход от grunt к webpack.Я пытаюсь сделать то же самое, что и с grunt:

  1. Очистить выходную папку, удалить файл scss с размерами и координатами, сгенерированными webpack-spritesmith (clean-webpack-plugin))
  2. Копирование статических изображений в выходную папку (copy-webpack-plugin)
  3. Создание спрайта со всеми значками (webpack-spritesmith)
  4. Сжатие спрайта (файл-loader, image-webpack-loader)
  5. Копировать шрифты в выходную папку (file-loader)
  6. Компилировать 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

У меня два вопроса:

  1. Как я могувыполнить какой-нибудь код после того, как весь процесс связывания закончен?Любой плагин?Создать плагин, играющий с хуками (afterEmit и т. Д.) - вариант?

  2. Если webpack-spritesmith работает асинхронно, нужно ли беспокоиться о том, что он не завершится, когда webpack перейдет к входу?У меня нет проблем с этим, процесс компиляции scss находит scss, сгенерированный webpack-spritesmith без проблем.Сжатие сгенерированного sprite.png также выполнено успешно.Веб-пакет начинает обрабатывать записи, когда плагины полностью выполнены?

Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...