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 アプリの実装が機能しています。苦労して登録するだけです。
どんな助けでも大歓迎です!