Как скомпилировать сервисного работника в отдельное место из другого JS, используя Webpack?

Question

Я работаю над проектом типа TypeScript, поэтому хочу написать работника службы в TypeScript, а затем скомпилировать его до ES5.

У меня есть, что работать со следующими параметрами конфигурации:

// webpack.config.json 
entry: { 
    app: './src/index.tsx', 
    sw: './src/service-worker/sw.ts', 
}, 

output: { 
    filename: '[name].js', 
    path: __dirname + '/dist', 
}, 

Это создает dist/app.js и dist/sw.js файл. Тем не менее, работники служб имеют ограничение, которое заключается в том, что они могут кэшировать только файлы, находящиеся в каталоге рабочего или под ним. Я хочу кэшировать корень (index.html), поэтому я не могу его найти в каталоге dist.

Есть ли наилучшая практика для решения этой проблемы? Я думаю о двух возможностях:

1. Скомпилируйте сервисного работника в корневой каталог проекта. Мне не нравится эта опция, потому что тогда у моего корня проекта будет скомпилированный файл (sw.js) с кучей каталогов (например, src и dist) и конфигурационными файлами (например, package.json и tsconfig.json).
2. Как-то переместите index.html в другой каталог и подавайте его оттуда. Я не супер против этого, если это возможно.

Есть ли другие возможности? Если нет, то какой из этих двух звуков выглядит как лучшая идея, и как я могу настроить Webpack для решения этой проблемы?

Answer 1

У вас есть несколько вариантов: один устанавливает сервис-работника как статический контент, указывая на нужную конечную точку.
Использование выразить:

app.use('/sw.js', Express.static(join(__dirname, '../dist/sw.js'),staticOptions)); 

Другой вариант заключается в использовании proxy.
Или даже вы можете создать специальное промежуточное ПО , если вам нужно больше контроля над запросом.

app.use((req, res, next) => { 

    //if req.url is /dis/sw.js 
    //rewrite the URL to /sw.js 
    req.url = newUrl; 

    next(); 
}); 

Вот некоторые варианты, надеюсь, что это поможет прояснить.