Не получается изменить имя чанков в webpack

Вопрос-ответ JavaScript
1

Есть такой конфиг:

import path from "path";
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: path.resolve(__dirname, "source/js/index.js"),  

  mode: process.env.NODE_ENV ? 'production' : 'development',

  devtool: process.env.NODE_ENV ? false : "source-map",

  target: ['web', 'es5'],

  optimization: {    
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'splidejs',
          chunks: 'all',
        },
      },
    },    
    chunkIds: 'named'
  },
};

Файловая структура проекта изначально:
Скриншот 08-01-2024 201647

В результате работы вебпака js-файлы получают следующие названия:
Скриншот 08-01-2024 201740

Я хочу избавиться от уродливых source_js-префиксов и -mjs-постсфикса перед расширением файла, чтобы было, как имена у модулей - простые: music.js и т.д. Подскажите, пожалуйста, как это сделать - эксперименты с документацией вебпака вообще никак не влияют на имена выходных файлов.

2

Привет!

Честно говоря не сталкивался раньше с такой задачей, но вот нашел статью, в которой описано как именовать чанки: How to name a webpack chunk (including split and common chunks) - Codemzy's Blog

Не проверял, но, похоже, для твоего случая (согласно этой статье) подойдут настройки для webpack:

const path = require('path');

module.exports = {
  entry: {
    app: './src/app.js', // в статье две точки входа app.js и print.js
    print: './src/print.js', // у тебя наверное будет одна точка входа ./src/index.js
  },
  output: {
    filename: '[name].js', // имя файла без префиксов и постфиксов
    chunkFilename: '[name].js', // имя чанка без префиксов и постфиксов
    path: path.resolve(__dirname, 'dist'),
  },
 };

Сами импорты надо будет переделать с:

import { featureA } from './featureA';

на:

import("./featureA").then(result => {
  // do something
});

Или для React’а переделать на:

const FeatureA = React.lazy(() => import('./FeatureA'));

И добавить комментарии ко всем модулям, чтобы webpack знал как именовать модули-чанки:

import(/* webpackChunkName: "featureA" */ './featureA')

Также в статье упоминается такая возможность для задания имен чанков (для именования чанков по именам модулей, в которых эти чанки используются, подробнее - в статье):

// ...
  optimization: {
    splitChunks: {
      name: (module, chunks, cacheGroupKey) => {
        const allChunksNames = chunks.map((chunk) => chunk.name).join('-');
        return allChunksNames;
      },
    },
  },
};

Можно попробовать поиграться с этой функцией, повыводить в консоль какие параметры этой функции name() приходят и как эти данные можно комбинировать для задания имен чанков.

Но это в теории судя по статье, надо пробовать как оно по факту будет получаться…

2 лайка
3

Привет! Как ни странно, сработало добавление в конфиг вебпака

output: {
    filename: '[name].bundle.js',
  },

И файлы получили нужное название: splider.bundle.js, music.bundle.js. Больше ничего не менял в своём конфиге. В любом случае, спасибо, что дал идею )

2 лайка