复习webpack4之PWA打包配置
之前学习过webpack3的知识，但是webpack4升级后还是有很多变动的，所以这次重新整理一下webpack4的知识点，方便以后复习。
这次学习webpack4不仅仅要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，比如打包原理等等，所以可能会省略一些比较基础的内容，但是希望我可以通过此次学习掌握webpack，更好地应对以后的工作。
1.PWA
我们安装一下http-server，可以帮我们启动一个本地的服务，模拟线上环境。
http-server dist的意思是：根据dist目录启动一个本地服务。
启动之后，我们就可以正常访问页面了。此时如果断开服务，就会出现无法访问此网站。
而PWA的作用就是，在断网的情况下，依然可以访问这个网站。
2.配置方法
我们可以根据现有的webpack插件来实现，首先安装插件
cnpm install -D workbox-webpack-plugin
复制代码然后引入插件。
然后在插件中配置。
然后进行打包，会发现打包的文件多了两个js。
这两个文件是用来帮我们实现PWA的。现在还需要写一些业务代码。
再次重新打包后，启动http-server，会发现现在页面已经被缓存了。
断开服务器，再打开页面，发现页面已经被缓存了。这只是很基础的配置，如果需要更好的使用，还是要去做更多的了解。
转载于:https://juejin.im/post/5cdc187f6fb9a031eb58bc49
复习webpack4之PWA打包配置相关推荐
- 复习webpack4之实现简易的webpack
之前学习过webpack3的知识,但是webpack4升级后还是有很多变动的,所以这次重新整理一下webpack4的知识点,方便以后复习. 这次学习webpack4不仅仅要会配置,记住核心API,最好 ...
- 复习webpack4之Code Splitting
之前学习过webpack3的知识,但是webpack4升级后还是有很多变动的,所以这次重新整理一下webpack4的知识点,方便以后复习. 这次学习webpack4不仅仅要会配置,记住核心API,最好 ...
- css练习题4,复习webpack4之CSS文件代码分割
之前学习过webpack3的知识,但是webpack4升级后还是有很多变动的,所以这次重新整理一下webpack4的知识点,方便以后复习. 这次学习webpack4不仅仅要会配置,记住核心API,最好 ...
- [原] Jenkins Android 自动打包配置
一.Jenkins自动打包配置 目标:1. 自动打包:2. 自动上传:3. 友好下载 1. Jenkins简介 Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作. 减少重复劳 ...
- 【Android 安装包优化】动态库打包配置 ( “armeabi-v7a“, “arm64-v8a“, “x86“, “x86_64“ APK 打包 CPU 指令集配置 | NDK 完整配置参考 )
文章目录 一.动态库打包配置 二.NDK 完整配置参考 三.参考资料 一.动态库打包配置 在 build.gradle 构建脚本中 , 配置 ndk 编译的动态库 CPU 架构类型 ; 在 " ...
- 【Android NDK 开发】Android Studio 的 NDK 配置 ( 源码编译配置 | 构建脚本配置 | 打包配置 | CMake 配置 | ndkBuild 配置 )
文章目录 I . 源码编译配置 II . 构建脚本配置 III . NDK 函数库打包配置 IV . Java 与 C 代码示例 V . CMake 配置 ( CMakeLists.txt ) VI ...
- webpack 入口文件 php,如何实现webpack多入口文件打包配置
本篇文章主要介绍了webpack多入口文件页面打包配置详解,现在分享给大家,也给大家做个参考. 大多数情况下,我们使用 webpack来打包单页应用程序,这个时候只需要配置一个入口,一个模板文件,但也 ...
- 解决webpack4版本在打包时候出现Cannot read property ‘bindings‘ of null 或 Cannot find module ‘@babel/core‘问题
解决webpack4版本在打包时候出现Cannot read property 'bindings' of null 或 Cannot find module '@babel/core'问题 参考文章 ...
- webpack基本打包配置流程
项目搭建以及webpack打包配置流程 创建文件夹EC(文件夹和文件名根据需求自定义) 在EC文件夹下新建文件夹APP 在APP文件夹下新建入口文件index.js 和运行该入口文件的index.ht ...
- vue打包配置的详细说明【config/index.js的build部份】
一.vue打包配置的详细说明[config/index.js的build部份] index: path.resolve(__dirname, '../dist/index.html') 打包生成的文件 ...
最新文章
- 安装mysql-connector-python-8.0.11-py3.6遇到问题
- 远程mysql定时删除数据_mysql定时备份数据库 删除历史文件 将备份数据库传送到另外服务器...
- linux下安装oracle 11g R2
- windbg 常用命令详解
- 电子书下载：Ultra-Fast ASP.NET 4.5 2nd
- [sql]匹配标题中出现最多关键字的结果
- 如何注册和获取百度地图的密钥
- feign返回结果统一处理_SpringCloud异常处理统一封装我来做-使用篇
- 【Tricks】半监督深度学习训练和实现小Tricks
- js des加密 java_java端采用DES/CBC/PKCS5Padding 加密，js解密不了。google搜了好多方法没能解决...
- echarts geo地图示例_Echarts地图展示及属性分析
- 【Java项目】OA办公管理系统-万字细致讲解
- 在手机/平板上安装kali系统
- matlab 深度网络,深度信念网络matlab代码
- 听湖畔大学：史玉柱谈企业文化
- 最美应用－从Android研发工程师的角度之[厨房故事]
- vbscript下载文件(使用https绕过无效的证书错误)
- 幸福究竟和哪些因素有关？通过JMP来看全球幸福指数
- 文字识别在高德地图数据生产中的演进
- 在kali使用DDos-Attack 进行DDos攻击