webpack example config

'use strict';

const NODE_ENV = process.env.NODE_ENV || "development"; //переменная окружения нужная для переключения между dev/prod
const webpack = require('webpack');

module.exports = {
    context: __dirname + "/frontend", //указывается root, где искать файлы для entry
    entry: { //объект, когда несколько точек входа. строка, когда одна
        home: "./home", 
        about: "./about",
        commons: "./commons" //если нужно положить свой код в общий файл, создаем просто файл с таким именем
    },
    output: {
        path: __dirname + "/public", //куда класть получившиеся файлы после сборки
        filename: "[name].js", //шаблон, используется если entry объект
        library: "[name]" //используется, когда необходим доступ к функциям из вне. Записывает функции в переменную home.
                        //К примеру в теге script
    },
    optimization: {
        minimize: false, //отключате минимизацию конечного файла
        splitChunks: { //выделяет общие участки кода (зависимости) во всех точках входа
            cacheGroups: {
                commons: {
                    name: "commons",
                    minChunks: 1,
                    minSize: 1
                }
            }
        }
    },

    watch: NODE_ENV === "development", //говорит webpack-у следить за изменениями в файлах и перезапускать сборку

    watchOptions: {
        aggregateTimeout: 100 //ожидать 100 милисекунд после обнаружения изменений в файле
    },

    devtool: NODE_ENV === "development" ? 'inline-source-map' : null, //удобно при дебагинге. 
                                                    //В отладочной консоле каждый модуль живет в отдельном файле

    plugins: [ //могут подключаться на разных стадия компиляции и что то делать
        //new webpack.NodeEnvironmentPlugin('NODE_ENV') //передает process.env ключи окружения клиенту, удобно когда часть кода не должна попадать на прод
        new webpack.DefinePlugin({ //передает клиенту переменные как есть
            NODE_ENV: JSON.stringify(NODE_ENV)
        }),

        new webpack.NoEmitOnErrorsPlugin() //если были ошибки при сборке, то полученный файлы создаваться не будут
    ],

    module: {
        rules: [{ //набор трансформаторов
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: [
                      ['env', {
                        targets: {
                          browsers: "> 3%" // можно и указать конкретные браузеры
                        }
                      }]
                    ]                
              }
            }
        }]
    }
};

use chunkFilename: '[name].js' in object output for set chunk readable name