19

webpack を使用して ReactJS Web アプリケーションを実装しています。ファイルをキャッシュするために、ネットワーク呼び出しを処理する Service Worker の実装を開始したいと考えています。ただ、サービスワーカーのjavascriptファイルを登録するのが大変です。(React と webpack の両方に関して言えば、私は初心者であることを付け加えておきます。)

うまくいけば、webpack はすべての JavaScript ファイルを 1 つのbundle.jsファイルにマージするため、 navigator.serviceWorker.register('./sw.js').... serviceworker-webpack-pluginなどのさまざまなアプローチを試しましたが、うまくいきませんでした。readme ページに記載されている手順に従うと、エラー メッセージが表示されますUncaught Error: serviceworker-webpack-plugin: It seems that your are importing "serviceworker-webpack-plugin/lib/runtime" without using the plugin. Makes sure that your webpack configuration is correct.

これが私のwebpack.config.jsファイルです:

var webpack = require('webpack');
var path = require('path');
import ServiceWorkerWebpackPlugin from 'serviceworker-webpack-plugin';

module.exports = {
  devtool: 'inline-source-map',
  entry: [
    'webpack-dev-server/client?http://127.0.0.1:8080/',
    'webpack/hot/only-dev-server',
    './src/index.js'
  ],
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  resolve: {
    modulesDirectories: ['node_modules', 'src'],
    extensions: ['', '.js']
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: ['babel-loader'],
        query: {
          presets: ['es2015','react']
        }
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new ServiceWorkerWebpackPlugin({
      entry: path.join(__dirname, 'src/sw.js'),
      excludes: [
        '**/.*',
        '**/*.map',
        '*.html',
      ],
      filename: 'sw.js'
    })
  ]
}

注:create-react-appコマンドを使用して作業を開始しました。また、Service Worker 自体に問題はありません。別の Web アプリの実装が機能しています。苦労して登録するだけです。

どんな助けでも大歓迎です!

4

2 に答える 2