преди 3 години · 6454dced4a
--- a/25/build/css/built.7d59fc1ca3.css
+++ b/25/build/css/built.7d59fc1ca3.css
@@ -0,0 +1 @@
 
				+body,html{background:red;height:100%;margin:0;padding:0}
			
--- a/25/build/index.html
+++ b/25/build/index.html
@@ -0,0 +1 @@
 
				+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Document</title><script defer="defer" src="js/built.8cf06b6f63.js"></script><link href="css/built.7d59fc1ca3.css" rel="stylesheet"></head><body><h1>hello chuck11222</h1></body></html>
			
--- a/25/build/js/built.4e39acd655.js
+++ b/25/build/js/built.4e39acd655.js
--- a/25/build/js/built.4e39acd655.js.map
+++ b/25/build/js/built.4e39acd655.js.map
--- a/25/build/js/built.8cf06b6f63.js
+++ b/25/build/js/built.8cf06b6f63.js
--- a/25/build/js/built.8cf06b6f63.js.map
+++ b/25/build/js/built.8cf06b6f63.js.map
--- a/25/build/media/1feff74faa.bin
+++ b/25/build/media/1feff74faa.bin
@@ -0,0 +1 @@
 
				+__webpack_public_path__ = __webpack_base_uri__ = htmlWebpackPluginPublicPath;
			
--- a/25/build/service-worker.js
+++ b/25/build/service-worker.js
@@ -0,0 +1,2 @@
 
				+if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let r=Promise.resolve();return s[e]||(r=new Promise((async r=>{if("document"in self){const s=document.createElement("script");s.src=e,document.head.appendChild(s),s.onload=r}else importScripts(e),r()}))),r.then((()=>{if(!s[e])throw new Error(`Module ${e} didn’t register its module`);return s[e]}))},r=(r,s)=>{Promise.all(r.map(e)).then((e=>s(1===e.length?e[0]:e)))},s={require:Promise.resolve(r)};self.define=(r,i,t)=>{s[r]||(s[r]=Promise.resolve().then((()=>{let s={};const n={uri:location.origin+r.slice(1)};return Promise.all(i.map((r=>{switch(r){case"exports":return s;case"module":return n;default:return e(r)}}))).then((e=>{const r=t(...e);return s.default||(s.default=r),s}))})))}}define("./service-worker.js",["./workbox-47687e40"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"css/built.7d59fc1ca3.css",revision:null},{url:"index.html",revision:"0a722d52a8287a68febb587dacc93ac8"},{url:"js/built.8cf06b6f63.js",revision:null},{url:"media/1feff74faa.bin",revision:null}],{})}));
			
 
				+//# sourceMappingURL=service-worker.js.map
			
--- a/25/build/service-worker.js.map
+++ b/25/build/service-worker.js.map
@@ -0,0 +1 @@
 
				+{"version":3,"file":"service-worker.js","sources":["../../../AppData/Local/Temp/38dc9234d83e0fb456975976bba568bb/service-worker.js"],"sourcesContent":["import {clientsClaim as workbox_core_clientsClaim} from 'C:/Users/chuck/www/webpackstudy/node_modules/_workbox-core@6.2.4@workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from 'C:/Users/chuck/www/webpackstudy/node_modules/_workbox-precaching@6.2.4@workbox-precaching/precacheAndRoute.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"css/built.7d59fc1ca3.css\",\n    \"revision\": null\n  },\n  {\n    \"url\": \"index.html\",\n    \"revision\": \"0a722d52a8287a68febb587dacc93ac8\"\n  },\n  {\n    \"url\": \"js/built.8cf06b6f63.js\",\n    \"revision\": null\n  },\n  {\n    \"url\": \"media/1feff74faa.bin\",\n    \"revision\": null\n  }\n], {});\n\n\n\n\n\n\n\n\n"],"names":["self","skipWaiting"],"mappings":"szBAoBAA,KAAKC,kDAU+B,CAClC,KACS,oCACK,MAEd,KACS,sBACK,oCAEd,KACS,kCACK,MAEd,KACS,gCACK,OAEb"}
			
--- a/25/build/workbox-47687e40.js
+++ b/25/build/workbox-47687e40.js
--- a/25/build/workbox-47687e40.js.map
+++ b/25/build/workbox-47687e40.js.map
--- a/25/server.js
+++ b/25/server.js
@@ -0,0 +1,12 @@
 
				+/**

			
 
				+ * 启动 node server.js

			
 
				+ */

			
 
				+const express =  require('express')

			
 
				+

			
 
				+const app = express()

			
 
				+

			
 
				+app.use(express.static('build',{ cacheControl: true, setHeaders: function(res, path) { 

			
 
				+    res.setHeader("Cache-Control","max-age=3600");  

			
 
				+}}));

			
 
				+

			
 
				+app.listen(3000)
			
--- a/25/src/css/index.css
+++ b/25/src/css/index.css
@@ -0,0 +1,6 @@
 
				+html,body{

			
 
				+    margin:0;

			
 
				+    padding:0;

			
 
				+    height:100%;

			
 
				+    background:red;

			
 
				+}
			
--- a/25/src/index.html
+++ b/25/src/index.html
@@ -0,0 +1,12 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">

			
 
				+    <title>Document</title>

			
 
				+</head>

			
 
				+<body>

			
 
				+    <h1>hello chuck11222</h1>

			
 
				+</body>

			
 
				+</html>
			
--- a/25/src/js/index.js
+++ b/25/src/js/index.js
@@ -0,0 +1,24 @@
 
				+import '../css/index.css';
			
 
				+import { mul } from './test';
			
 
				+
			
 
				+function sum(...args) {
			
 
				+  return args.reduce((p, c) => p + c, 0);
			
 
				+}
			
 
				+
			
 
				+console.log(sum(1, 2, 3, 4, 5));
			
 
				+
			
 
				+console.log(mul(2, 3));
			
 
				+
			
 
				+// 注册serviceworker
			
 
				+// 处理兼容性问题
			
 
				+if ('serviceWorker' in navigator) {
			
 
				+  window.addEventListener('load', () => {
			
 
				+    navigator.serviceWorker.register('./service-worker.js')
			
 
				+      .then(() => {
			
 
				+        console.log('success');
			
 
				+      })
			
 
				+      .catch(() => {
			
 
				+        console.log('failed');
			
 
				+      });
			
 
				+  });
			
 
				+}
			
--- a/25/src/js/test.js
+++ b/25/src/js/test.js
@@ -0,0 +1,6 @@
 
				+export function mul(x, y) {
			
 
				+  return x * y;
			
 
				+}
			
 
				+export function count(x, y) {
			
 
				+  return x - y;
			
 
				+}
			
--- a/25/webpack.config.js
+++ b/25/webpack.config.js
@@ -0,0 +1,158 @@
 
				+const { resolve } = require("path");

			
 
				+//提取css

			
 
				+const MiniCssExtractPlugin = require('mini-css-extract-plugin');

			
 
				+//压缩css

			
 
				+const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

			
 
				+//js语法检查

			
 
				+const EsLintPlugin = require('eslint-webpack-plugin')

			
 
				+//html资源处理

			
 
				+const HtmlWebpackPlugin = require('html-webpack-plugin')

			
 
				+//设置node环境变量 postcss-loader会根据它读取package.js里的browserslist配置

			
 
				+process.env.NODE_ENV = 'development'

			
 
				+//

			
 
				+const WorkboxWebpackPlugin = require('workbox-webpack-plugin')

			
 
				+/**

			
 
				+ * PWA 渐进式网络开发应用程序

			
 
				+ * workbox --> workbox-webpack-plugin

			
 
				+ * package.json中eslintConfig需配置如下：

			
 
				+ * "env":{

			
 
				+      "browser": true //可以使用浏览器全局变量

			
 
				+    }

			
 
				+    必须运行在服务器上

			
 
				+ */

			
 
				+//复用loader

			
 
				+const commonCssLoader = [

			
 
				+    MiniCssExtractPlugin.loader, //提取css

			
 
				+    'css-loader',

			
 
				+    {

			
 
				+        loader: 'postcss-loader', //兼容性处理

			
 
				+        options: {

			
 
				+             // 旧版本配置

			
 
				+            /* ident: 'postcss', 

			
 
				+            plugins: () => [

			
 
				+                require('postcss-preset-env')()  //读取package.json里browserslist配置，默认加载根据node_env加载production

			
 
				+            ] */

			
 
				+            postcssOptions: {

			
 
				+                plugins: [

			
 
				+                  [

			
 
				+                    'postcss-preset-env'

			
 
				+                  ],

			
 
				+                ],

			
 
				+            }

			
 
				+        }

			
 
				+    }

			
 
				+]

			
 
				+

			
 
				+module.exports = {

			
 
				+    entry: './src/js/index.js',

			
 
				+    output: {

			
 
				+        filename: 'js/built.[contenthash:10].js',

			
 
				+        path: resolve(__dirname, 'build')

			
 
				+    },

			
 
				+    module:{

			
 
				+        rules:[{

			
 
				+            // 以下loader只会匹配一个 提高效率

			
 
				+            // 注意：不能有两个配置处理同一种文件

			
 
				+            oneOf:[

			
 
				+                {

			
 
				+                    test:/\.css$/,

			
 
				+                    use: [

			
 
				+                        ...commonCssLoader

			
 
				+                    ]

			
 
				+                },

			
 
				+                {

			
 
				+                    test:/\.less$/,

			
 
				+                    use:[

			
 
				+                        ...commonCssLoader,

			
 
				+                        'less-loader'

			
 
				+                    ]

			
 
				+                },

			
 
				+                {  //兼容性处理

			
 
				+                    test:/\.js$/,

			
 
				+                    exclude: /node_modules/,

			
 
				+                    loader: 'babel-loader',

			
 
				+                    options:{

			
 
				+                        // 预设：指示babel做怎样的兼容性处理

			
 
				+                        presets:[

			
 
				+                            [

			
 
				+                                '@babel/preset-env',

			
 
				+                                {

			
 
				+                                    useBuiltIns: 'usage',

			
 
				+                                    corejs:{

			
 
				+                                        version:3

			
 
				+                                    },

			
 
				+                                    targets:{

			
 
				+                                        chrome: '60',

			
 
				+                                        firefox: '60',

			
 
				+                                        ie:'9',

			
 
				+                                        safari: '10',

			
 
				+                                        edge: '17'

			
 
				+                                    }

			
 
				+                                }

			
 
				+                            ]

			
 
				+                        ],

			
 
				+                         //开启babel缓存

			
 
				+                         // 第二次构建时，会读取之前的缓存

			
 
				+                        cacheDirectory: true 

			
 
				+                    }

			
 
				+                },

			
 
				+                //处理图片

			
 
				+                {

			
 
				+                    test:/\.(jpg|png|jpeg|gif)/,

			
 
				+                    loader:'url-loader',

			
 
				+                    options:{

			
 
				+                        limit:8*1024,

			
 
				+                        name:'[hash:10].[ext]',

			
 
				+                        outputPath:'imgs',

			
 
				+                        esModule: false,

			
 
				+                    }

			
 
				+                },

			
 
				+                //html 处理

			
 
				+                {

			
 
				+                    test:/\.html$/,

			
 
				+                    loader:'html-loader'

			
 
				+                },

			
 
				+                //其他资源处理

			
 
				+                {

			
 
				+                    exclude:/\.(js|css|less|html|jpg|jpeg|png|gif)/,

			
 
				+                    loader:'file-loader',

			
 
				+                    options:{

			
 
				+                        outputPath:'media',

			
 
				+                        esModule: false,

			
 
				+                        name: '[hash:10].[ext]'

			
 
				+                    },

			
 
				+                    type: 'javascript/auto'

			
 
				+                }

			
 
				+            ]

			
 
				+        }]

			
 
				+    },

			
 
				+    plugins:[

			
 
				+        new MiniCssExtractPlugin({

			
 
				+            filename: 'css/built.[contenthash:10].css'

			
 
				+        }),

			
 
				+        new OptimizeCssAssetsWebpackPlugin(),

			
 
				+        new EsLintPlugin({

			
 
				+            extensions: ['js', 'json', 'coffee'],

			
 
				+            //exclude: '/node_modules/',

			
 
				+            fix:true

			
 
				+        }),

			
 
				+        new HtmlWebpackPlugin({

			
 
				+            template: './src/index.html',

			
 
				+            minify:{

			
 
				+                collapseWhitespace:true,

			
 
				+                removeComments:true

			
 
				+            }

			
 
				+        }),

			
 
				+        new WorkboxWebpackPlugin.GenerateSW({

			
 
				+            /**

			
 
				+             * 帮助sericeworker快速启动

			
 
				+             * 删除旧的serviceworker

			
 
				+             * 生成serviceworker配置文件  示例 ./src/js/index.js

			
 
				+             */

			
 
				+            clientsClaim: true,

			
 
				+            skipWaiting: true

			
 
				+        })

			
 
				+    ],

			
 
				+    mode:'production',

			
 
				+    devtool:'source-map'

			
 
				+}
			
--- a/README.md
+++ b/README.md
@@ -29,6 +29,7 @@ npx webpack serve
 
				 * 22：tree shaking: 去除无用代码

			
 
				 * 23: code split 代码分割

			
 
				 * 24: 懒加载和预加载

			
 
				+* 25：PWA 可离线访问 -- 缓存

			
 
				 

			
 
				 ## 关于

			
 
				 用于学习webpack配置，包括css、less、图片资源、其他资源、开发环境等配置。

			
--- a/package.json
+++ b/package.json
@@ -27,7 +27,8 @@
 
				     "url-loader": "^4.1.1",
			
 
				     "webpack": "^5.48.0",
			
 
				     "webpack-cli": "^4.7.2",
			
 
				-    "webpack-dev-server": "^3.11.2"
			
 
				+    "webpack-dev-server": "^3.11.2",
			
 
				+    "workbox-webpack-plugin": "^6.2.4"
			
 
				   },
			
 
				   "browserslist": {
			
 
				     "development": [
			
@@ -45,6 +46,9 @@
 
				     "extends": "airbnb-base",
			
 
				     "rules": {
			
 
				       "no-console": "off"
			
 
				+    },
			
 
				+    "env":{
			
 
				+      "browser": true
			
 
				     }
			
 
				   }
			
 
				 }
		`@@ -0,0 +1 @@`
		`+body,html{background:red;height:100%;margin:0;padding:0}`
		`@@ -0,0 +1 @@`
		`+__webpack_public_path__ = __webpack_base_uri__ = htmlWebpackPluginPublicPath;`