我正在使用webpack实现一个ReactJS Web应用程序,并希望开始实现服务工作者来处理网络调用,以便缓存文件。然而,我发现很难注册服务工作者的javascript文件。(需要说明的是,当涉及到React和webpack时,我都是初学者。)
如果我理解正确,webpack将每个javascript文件合并成一个bundle.js
文件,这使得调用navigator.serviceWorker.register('./sw.js')...
变得困难。我尝试了不同的方法,例如serviceworker-webpack-plugin,但都没有成功。如果我按照自述页面提供的步骤进行操作,就会出现错误消息,提示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
命令来开始。另外,我对服务工作者本身没有任何问题,我已经为另一个web应用程序实现了可工作的实现。我只是在注册它方面遇到了困难。感谢您的帮助!