Webpack: обработка статических ресурсов с помощью webpack-manifest-plugin в производственной сборке - PullRequest
Новая
       21

Webpack: обработка статических ресурсов с помощью webpack-manifest-plugin в производственной сборке

0 голосов
/ 17 ноября 2018

В настоящее время я работаю над интеграцией Webpack в существующее многостраничное приложение для рендеринга на стороне сервера, чтобы использовать современные инструменты и экосистему вокруг Webpack.

В первую очередь это был хороший опыт, но в настоящее время я борюсь с интеграцией в наш серверный код, особенно с производственной сборкой, использующей хеширование и структуру плоских папок . Основная идея очень проста: все ресурсы управляются через Webpack, и с помощью webpack-manifest-plugin я генерирую manifest.json, который читается нашим серверным приложением. А с помощью вспомогательной функции я бы превратил путь типа static/images/logo.png в logo-[hash].png.

Это прекрасно работает для файлов js / css (где релевантно только имя пакета моих точек входа), но у меня возникают проблемы при создании файла manifest.json, который содержит необходимую информацию для статических ресурсов, таких как изображения и документы.

Частичная конфигурация Webpack

Это соответствующая часть моей конфигурации веб-пакета: 

{
    entry: {
        index: './js/app.js',
        "static-assets": './js/static-assets.js'
    },
    output: {
        filename: '[name].js'
    },
    resolve: {
        alias: {
            "vendor-assets": "dependencyX/assets",
        }
    },
    plugins: [
        new WebpackManifestPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: isDev ? '[path][name].[ext]' : '[hash].[ext]',
                        }
                    }
                ]
            }
        ]
    }
}

Подход 1: copy-webpack-plugin

Я попробовал конфигурацию, подобную этой: 

new CopyWebpackPlugin([
    {
        from: './static',
        to: isDev ? '[path][name].[ext]' : '[name].[hash].[ext]'
    },
    {
        from: 'node_modules/dependencyX/assets/img',
        to: isDev ? 'vendor-assets/[path][name].[ext]' : '[name].[hash].[ext]'
    },
])

Задача 1: В манифесте я получаю только ключ от нового местоположения, но не имею никакой информации об исходном пути: 

"logo.png": "logo.d985ee06aa950d9232f80c09a9e1329f.png"

вместо: 

"node_modules/dependencyX/assets/img/logo.png": "logo.d985ee06aa950d9232f80c09a9e1329f.png",

или даже лучше, учитывая мой определенный псевдоним: 

"vendor-assets/img/logo.png": "logo.d985ee06aa950d9232f80c09a9e1329f.png",

Проблема 2: поскольку copy-webpack-plugin, кажется, делает простое копирование, возникнет проблема дублирования. Если я ссылаюсь на один из этих статических ресурсов также из обычного пакета, он появится во второй раз в папке вывода.

Подход 2: пакет статических активов

Мой второй подход состоял в том, чтобы определить пакет static-assets.js, который ссылается на все возможные местоположения статических ресурсов, используя request.context: 

require.context('../static', true, /.+/);
require.context('vendor-assets/img', true, /.+/);

Проблема: Как и в случае с подходом копирования, результирующий манифест содержит в качестве ключа только простое имя файла, а не исходный путь.

Вопросы

  • Есть ли простой способ решить эту проблему с помощью конфигурации?
  • Есть ли другие подходы?
...