您的位置:首页 > 其它

使用webpack 配置 serviceworker 实现离线缓存

第一步安装 npm i -D serviceworker-webpack-plugin。
第二步:编写wepack.config.js 如下

const path = require('path');
const ExtracTextPlugin =require('extract-text-webpack-plugin')
const { WebPlugin ) = require (’ web-webpa ck-plugin ’);
const ServiceWorkerWebpackPlugin = require (’ serviceworker-webpack-plugin ’);
module.exports = {
entry : {
app :’./main.j s ’ //项目的入口文件
},
output:{
filename:'[name].js',//定义输出文件名字
publicPath:''
},
//配置需要哪些规则
module:{
rules:{
test: l\.cssl,11 增加对 css 文件的支持
//提取出 Chunk 中的 css 代码到单独的文件中
use: ExtractTextPlugin.extract((
use: [’ css-loader ]//压缩 css 代码
}) ,
}

},
plugins:[
new WebPlugin((
template: '. ltemplate .html ’, II HTML 模板文件所在的文件路径
filename :’ inde x.html ’//输出 HTML 的文件名称
}) ,
new ExtractTextPlugin({
filename 、[ name] .css //为输出的 css 文件名称加上 Hash
} ),
new ServiceWorkerWebpackPlugin ({
entry: path.join (_dirname ,’ sw.js ’) ,
}),

],
devServer: (   //开启deServer服务
https: true ,
}
}
标签: