【webpack】新的起航24 -- PWA的打包配置

调整代码

在这篇中，我们复用基础笔记中的demo-webpack文件，我们整理一下：

webpack.common.js：
注释掉imports-loader（改变模块this指向的配置）的使用，及webpack.ProvidePlugin（shimming垫片的跨模块配置），最后占时可以注释掉webpack的导入

// const webpack  = require('webpack');  // - 注释

{
	     test: /\.js$/,
	     exclude: /node_modules/,
	     // - 注释
	     // use: [{
	     //     loader: 'babel-loader'
	     // },{
	     //     loader: 'imports-loader?this=>window'
	     // }],
	     loader: 'babel-loader',
 },
  plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html',
            title: 'Caching'
        }),
        new CleanWebpackPlugin(),
        // new webpack.ProvidePlugin({    // - 注释
        //     $: 'jquery'
        // })
    ],

package.json:

可以去掉一个script指令，"start": "webpack --config ./build/webpack.common.js"这个指令，只留下一个开发和一个生产的指令，然后将license："MIT"改成开源即可，最后可以去掉一下不需要的包，在 【webpack】快速笔记8 – webpackDevServer开启本地服务基础笔记中我们就安装了一些模拟webpack服务器的包，我们可以删掉，如express webpack-dev-middleware，还有 【webpack】快速笔记21 – shimming跨模块构建工具 提及的this指向问题的包 imports-loader，最后用来测试的jquery和lodash第三方插件包也可以删掉，最后的配置基本展示为：

{
  "name": "webpack-demo",
  "sideEffects": [
    "*.css"
  ],
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --config ./build/webpack.common.js",
    "build": "webpack --env.production --config ./build/webpack.common.js"
  },
  "author": "Um",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "autoprefixer": "^9.6.1",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.12.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.3.1",
    "style-loader": "^1.0.0",
    "url-loader": "^2.1.0",
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0",
    "webpack-merge": "^4.2.2"
  },
  "dependencies": {
    "@babel/polyfill": "^7.4.4",
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  }
}

最后就把上次打包的bundle文件夹删掉，在 src > index.js 输出一句Hello PWD，此时我们重新npm install，这个必须先执行再去重新打包，只要动过package.json里面的包就要重新安装一下，它会自动比较前后的package.json文件将删除的增加的或者是变动的都重新安排一下，最后执行npm run bulid即可

将打包文件放在服务器上running

根据上面的整理之后，我们想把重新打包好的文件放在服务器上跑，如何实现？ ↓

安装http-server搭建一个可发送请求的后端服务器：

npm install http-server --save-dev

安装完成之后，配置一下script命令：

  "scripts": {
    "dev": "webpack-dev-server --config ./build/webpack.common.js",
    "build": "webpack --env.production --config ./build/webpack.common.js",
    "start": "http-server bundle"   // + 新增
  },

配置完毕，运行npm run start：

此时进入当前服务，可以看到控制台输出了’Hello PWD’，现在我们就简易的通过http-server将我们打包的代码放在了http服务器上了，那跟PWD有什么关系呢？ 我们继续往下看

PWD实现了什么？

假如此时我们断网了或者服务器挂掉了，我们可以通过PWD技术配合浏览器缓存的数据进行页面的展示，如何做呢？ ↓

可以参考webpack文档 安装 workboxWebpackPlugin：

npm install workbox-webpack-plugin --save-dev

在生产环境下配置 workboxWebpackPlugin：

plugins:[
	+  new WorkboxPlugin.GenerateSW({
	+    clientsClaim: true,
	+    skipWaiting: true
	+  })
]

完成配置，重新打包npm run build：
此时bundle打包文件夹会对出service-worker.js precache-manifest.[hash].js

Registering Our Service Worker 注册

在入口文件index.js中进行注册，根据浏览器是否支持workboxWebpackPlugin进行注册：

+ if ('serviceWorker' in navigator) {
+   window.addEventListener('load', () => {
+     navigator.serviceWorker.register('/service-worker.js').then(registration => {
+       console.log('SW registered: ', registration);
+     }).catch(registrationError => {
+       console.log('SW registration failed: ', registrationError);
+     });
+   });
+ }

完成配置及其注册，我们重新运行npm run build打包，然后在运行http-server服务器，然后我们在高版本的chrome浏览器可以看到，成功输出对应的逻辑：

此时我们关掉服务器，再次刷新页面的时候，仍然是可以输出对应的逻辑

http-server部署服务器失败Bug

++++++++++++++++++++++++++++++++++++bug+++++++++++++++++++++++++++++++++++
关于http-server部署服务器后，启动npm run start的时候，出现无法访问的情况 ↓

至于解决办法，博主也正在找，但是找着找着心有点发凉，这个基本算是http-server的bug无疑了，而且http-server也好久没更新版本了，现在一直在v0.11.1中 …

目前可以先拿nginx或者express自启代理一个服务器来跑本地的打包文件了
++++++++++++++++++++++++++++++++++++bug+++++++++++++++++++++++++++++++++++

结语

这就是PWD的最基本的配置，它可以使用上次浏览器缓存的内容，不受网络及服务器开关的影响，一样可以请求到对应的页面，在业务上也可以使用这个PWD掺和到自己的某个项目中去，但是这里介绍的PWD配置仅仅是冰山一角，配置也是最简单的，如果想深入的则需要大家通过社区文档资料慢慢去钻研~

#下一篇【如何使用配置webpack对TypeScript进行打包支持~】