Немного про кеш

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

Эту проблему решают по разному. Как вариант, можно каждую последующую версию файла помещать в разные директории с названием версии. Или можно версию добавлять в название файла. Так немного лучше будет. В любом случае это дополнительные рутинные операции которые необходимо автоматизировать.

Webpack генерирует специальный хеш, который можно использовать в названии файла. Вот часть файла webpack-build.config.js:

    // ...
    entry: path.join(SRC_DIR, 'main.jsx'),
    output: {
        path: DIST_DIR,
        filename: 'app-[hash]-bundle.min.js'
    },
    // ...
    plugins: [
        function() {
            this.plugin('done', function(stats) {
                fs.readFile(path.join(PUBLIC_DIR, 'index.html'), 'utf8', function(readError, data) {
                    if (readError) {
                        return console.log(readError);
                    }
                    const fileName = stats.toJson().assets[0].name;
                    const result = data.replace(/assets\/bundle\.js/g, fileName);
                    fs.writeFile(path.join(DIST_DIR, 'index.html'), result, 'utf8', function(writeError) {
                        if (writeError) {
                            return console.log(writeError);
                        }
                    });
                });
            });
        },
        // ...
    ]

Обратите внимание на переменную stats которая содержит всю информацию о компиляции, в том числе название файла output.filename вместе с хешем.

Если в проект будут внесены изменения, то, во время сборки, webpack сгенерирует новый хеш и добавит его в название файла output.filename.

Запустите команду:

$ npm npm build

и посмотрите на результат. Теперь, измените что то в проекте и пересоберите проект — файлов будет два. В том случае, если в проекте ничего не изменялось, то и хеш не изменится.

При таких настройках, файлы разных версий накапливаются в папке и часто приходится удалять старые версии вручную. Давайте автоматизируем и этот процесс. Для этого реализуем обработчик события compile процесса компиляции, который сработает перед самой компиляцией. Также, для удобства, воспользуемся пакетом del:

$ npm install --save-dev del

const del = require('del');
// ...
    plugins: [
        function() {
            this.plugin('compile', function() {
                del.sync(path.join(DIST_DIR, '*.js'));
            });
        },
        // ...
    ]

Теперь, перед сборкой проекта, все лишние файлы будут удалятся.