Webpack 5 и webpack-dev-server генерируют чеки с разными именами с одинаковой конфигурацией - PullRequest
Новая
       33

Webpack 5 и webpack-dev-server генерируют чеки с разными именами с одинаковой конфигурацией

0 голосов
/ 24 февраля 2020

Проблема:

Я использую тот же конфиг разделения веб-пакетов для производства и разработки, но webpack / webpack-dev-server генерирует разные чанки, особенно чанки с разными именами. Из-за этих разных имен я не могу включать куски по имени в шаблоны CMS.

Цель:

Получение артефактов с одинаковыми именами в производственном режиме и режиме разработки для включения в шаблон веб-сайта / CMS по имени, как это было при использовании веб-пакета 4. Разделение кода должно оставаться для аутсорсинга часто используемых модулей отдельными частями.

Текущая конфигурация и результаты:

Используемые версии: webpack-dev-server@3.10.3, webpack@5.0.0-beta.13

Я создаю ресурсы для веб-сайта с управлением контентом, используя webpack и webpack-dev-server. Пакеты JS включаются по имени в шаблон нижнего колонтитула CMS в качестве сценариев с защитой. В настоящее время нет динамической c загрузки модулей через веб-пакет во время выполнения (да, это может быть желательно ...).

Это мой текущий конфиг (предполагаемые соответствующие части):

webpack.config.base (общие настройки объединены в настройках dev / prod): 

entry: {
    handlers: path.resolve(__dirname, './src/main/resources/META-INF/resources/resources/js/handlers-bundle.js'),
    videoplayer: path.resolve(__dirname, './src/main/resources/META-INF/resources/resources/js/handlers-video.js'),
    styles: path.resolve(__dirname, './src/main/resources/META-INF/resources/resources/scss/styles.scss'),
},
output: {
    filename: '[name].js',
    // chunkFilename: '[name].js',
    path: config.output,
},
plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
    }),
    new MiniCssExtractPlugin({
        filename: '[name].css',
    }),
    new BundleAnalyzerPlugin(),
],
optimization: {
    moduleIds: 'size',
    chunkIds: 'size',
    splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 0,
        // name: false,
    },
    runtimeChunk: 'single',
    minimizer: [
        new OptimizeCSSAssetsPlugin({
            cssProcessorPluginOptions: {
                preset: ['default', { discardComments: { removeAll: true } }],
            },
        }),
    ],
},

webpack.config.dev (запущено через "webpack-dev- сервер --hotOnly --config ./webpack.config.dev.js")

mode: 'development',
devtool: 'eval-cheap-module-source-map',
devServer: {
    port: config.port,
    // contentBase: config.output,
    inline: true,
    watchOptions: {
        poll: 1000,
        ignored: /node_modules/,
    },
    headers: { 'Access-Control-Allow-Origin': '*' },
    compress: true,
},
plugins: [
    new HotModuleReplacementPlugin(),
],
optimization: {
    minimizer: [
        new TerserPlugin({
            cache: false,
            sourceMap: true,
        }),
    ],
},

webpack.config.prod (запускается через "webpack --config ./ webpack.config.prod. js "): 

mode: 'production',
stats: {
    assets: true,
    chunks: true,
    entrypoints: true,
    modules: true,
    warnings: false,
},
plugins: [
    new CleanWebpackPlugin(),
],
optimization: {
    minimizer: [
        new TerserPlugin({
            cache: false,
        }),
    ],
},
performance: {
    hints: false,
},

С помощью webpack 4 я получил эти именованные артефакты в сборке dev и prod:

  • vendors ~ videoplayer. js
  • видеоплеер. js
  • вендоры ~ обработчики. js
  • вендоры ~ обработчики ~ видеоплеер. js
  • обработчики ~ видеоплеер. js
  • обработчики. js

С моей текущей настройкой webpack 5 я получаю следующие артефакты:

сборка продукта:

Обработчики точки входа [большой] = время выполнения. js 1. js 4 . js 2. js обработчики. css обработчики. js

Видеоплеер Entrypoint [большой] = время выполнения. js 1. js 3. js 2. js videoplayer. js

Стили точки входа [big] = время выполнения. js 8. css стили. css стили. js

dev build / dev-server:

Обработчики точки входа = время выполнения. js 1. js 3. js 7. js 2. js 4. * Обработчики 1123 *. * Обработчики 1124 *. js

Видеоплеер Entrypoint = время выполнения. js 1. js 3. js 5. js 2. js 4. js видеоплеер. js

Стили входа = время выполнения. js 1. js 10. css 2. js стили. css стилей. js

То, что я уже пробовал:

  • изменение сплитчунков / чанков на "начальные" - без разницы
  • экспериментируя с moduleIds и chunkIds, то есть с "named" или "terministi c "или с полным отсутствием этих настроек, но все же разные имена чанков и количество
  • , экспериментирующее с m axInitialRequests: Сокращение до 3 дало одинаковое количество чанков в dev и prod, но все равно разные имена чанков
  • splitchunks / name: false - без различий

Я предполагаю, что webpack-dev-server вводит свои собственные необходимые модули в пакеты, и, возможно, это приводит к большему количеству блоков с моей конфигурацией. Но я больше не представляю, как заставить те же номера и имена сгенерированных кусков.

Кто-нибудь имеет представление, в чем может быть причина или что изменить, чтобы применить то же поведение, что и в веб-пакете 4?

...