Как создать полностью автономный блок с помощью Webpack 3

Question

Я представляю сервисного работника в моем проекте, который будет использоваться для push-уведомлений. Я хотел бы поделиться общим кодом между работником службы и остальной частью моего сайта.

Используя Webpack 3 для построения моего проекта, мой первоначальный подход состоял в том, чтобы создать отдельную запись для работника службы и поместить полученный файл в корень моего вывода без хеша, чтобы дать ему согласованный веб-адрес:

entry: {
  'app': './src/main.js',
  'service-worker': './src/service-worker.js'
},
output: {
  path: config.build.assetsRoot,
  filename: chunkData => {
    return chunkData.chunk.name === 'service-worker'
      ? '[name].js'
      : utils.assetsPath('js/[name].[chunkhash].js')
  },
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},

Я также исключаю сервисного работника из моего HTML-кода:

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true,
  excludeChunks: ['service-worker'],
}),

Существует также несколько вариантов использования CommonsChunkPlugin, которые инструмент Vue CLI автоматически настраивал при первом создании проекта:

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks (module) {
    // any required modules inside node_modules are extracted to vendor
    return (
      module.resource &&
      /\.js$/.test(module.resource) &&
      module.resource.indexOf(
        path.join(__dirname, '../node_modules')
      ) === 0
    )
  }
}),

// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  minChunks: Infinity
}),

// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
  name: 'app',
  async: 'vendor-async',
  children: true,
  minChunks: 3
}),

Проблема, с которой я сталкиваюсь, заключается в том, что сгенерированный файл service-worker.js начинается так:

webpackJsonp([17],{"2xmR":function(e,n,_){"use strict";
var t,c,r,a,o,i;t="/path/to/src/service-worker.js",...

А функция webpackJsonp недоступна, когда браузер пытается запустить работника сервиса.

Я хотел бы, чтобы Webpack 3 генерировал service-worker.js со всеми его зависимостями (их немного, и я в порядке с дублированным кодом) и без каких-либо утилит Webpack.

Мои поиски не увенчались успехом. Кажется, что я хочу сделать противоположное тому, для чего предназначен CommonsChunkPlugin - но я делаю хочу эти общие куски для сайта, но не для работника службы.

Как я могу построить одну из моих точек входа со всеми зависимостями, включенными в файл, и без утилит Webpack?

Answer 1

Я наткнулся на комментарий к проблеме GitHub , который привел меня к этому решению. Большое спасибо Эрику Вуду ( SO , GitHub ) за этот комментарий.

Я узнал, что CommonsChunkPlugin принимает опцию chunks для ограничения того, какие чанки используются в качестве источников для общего чанка. Предоставляя список чанков, исключающих мой чанк service-worker, Webpack не будет извлекать код, общий для service-worker, и, следовательно, не будет вводить код webpackJsonp для динамической загрузки общего кода.

Со всем тем же, вот новая конфигурация плагина Webpack, которая решила мою проблему:

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  chunks: ['app'],
  minChunks (module) {
    // any required modules inside node_modules are extracted to vendor
    return (
      module.resource &&
      /\.js$/.test(module.resource) &&
      module.resource.indexOf(
        path.join(__dirname, '../node_modules')
      ) === 0
    )
  }
}),

new webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  chunks: ['app'],
  minChunks: Infinity
}),

new webpack.optimize.CommonsChunkPlugin({
  name: 'app',
  async: 'vendor-async',
  children: true,
  minChunks: 3
}),

Обратите внимание, что я добавил chunks к общим элементам vendor и manifest. При последнем использовании CommonsChunkPlugin уже использовалась опция children, и Webpack быстро сказал мне, что chunks не нужен.

Это приводит к service-worker.js файлу без webpackJsonp и вместо этого начинается так:

!function(e){var t={};function n(r){ ...