Как правильно создать данную WebPack конфигурацию?

Для создания правильной Webpack конфигурации, вам нужно выполнить следующие шаги:

1. Создайте файл webpack.config.js в корне вашего проекта.

2. Установите webpack и webpack-cli с помощью npm, выполнив следующую команду в терминале:

   npm install webpack webpack-cli --save-dev

3. В файле webpack.config.js импортируйте необходимые модули, например:

   const path = require('path');

4. Задайте начальную точку вашего приложения - файл, с которого Webpack должен начать сборку. Например:

   const entryPath = path.resolve(__dirname, 'src', 'index.js');

5. Задайте путь для сохранения собранного бандла. Например:

   const outputPath = path.resolve(__dirname, 'dist');

6. Определите настройки модулей. Можно использовать различные загрузчики, например, для JavaScript файлов можно использовать babel-loader, для CSS файлов - style-loader и css-loader. Пример настройки для JavaScript файлов:

   const rules = [
     {
       test: /.js$/,
       exclude: /(node_modules|bower_components)/,
       use: {
         loader: 'babel-loader',
         options: {
           presets: ['@babel/preset-env'],
         },
       },
     },
   ];

7. Определите плагины, которые вам необходимы. Например, HtmlWebpackPlugin для автоматической генерации HTML файла, в котором будет подключен ваш собранный бандл:

   const HtmlWebpackPlugin = require('html-webpack-plugin');
   const plugins = [
     new HtmlWebpackPlugin({
       template: path.resolve(__dirname, 'src', 'index.html'),
       filename: 'index.html',
     }),
   ];

8. Настройте конфигурацию Webpack:

   module.exports = {
     entry: entryPath,
     output: {
       path: outputPath,
       filename: 'bundle.js',
     },
     module: {
       rules: rules,
     },
     plugins: plugins,
   };

9. Дополнительно, вы можете настроить другие опции Webpack, такие как режим разработки или производства, devtool, devServer и т. д.

10. Добавьте скрипт в ваш package.json файл для запуска сборки Webpack:

    "scripts": {
      "build": "webpack --config webpack.config.js"
    }

После выполнения этих шагов ваша Webpack конфигурация будет настроена и готова к сборке вашего проекта. Вы можете запустить сборку, выполнив команду npm run build.