Home Explore Help
Sign In
chuck
/
webpackstudy
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

多进程打包

DESKTOP-MK04A0R\chuck 3 years ago
parent
6454dced4a
commit
9a322717d9
19 changed files with 232 additions and 1 deletions
Unified View Show Diff Stats
  1. 1 0
      26/build/css/built.7d59fc1ca3.css
  2. 1 0
      26/build/index.html
  3. 0 0
      26/build/js/built.4e39acd655.js
  4. 0 0
      26/build/js/built.4e39acd655.js.map
  5. 0 0
      26/build/js/built.8cf06b6f63.js
  6. 0 0
      26/build/js/built.8cf06b6f63.js.map
  7. 1 0
      26/build/media/1feff74faa.bin
  8. 2 0
      26/build/service-worker.js
  9. 1 0
      26/build/service-worker.js.map
  10. 0 0
      26/build/workbox-47687e40.js
  11. 0 0
      26/build/workbox-47687e40.js.map
  12. 12 0
      26/server.js
  13. 6 0
      26/src/css/index.css
  14. 12 0
      26/src/index.html
  15. 24 0
      26/src/js/index.js
  16. 6 0
      26/src/js/test.js
  17. 163 0
      26/webpack.config.js
  18. 1 0
      README.md
  19. 2 1
      package.json

+ 1 - 0
26/build/css/built.7d59fc1ca3.css
View File 

@@ -0,0 +1 @@
 
+body,html{background:red;height:100%;margin:0;padding:0}

+ 1 - 0
26/build/index.html
View File 

@@ -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>

File diff suppressed because it is too large
+ 0 - 0
26/build/js/built.4e39acd655.js


File diff suppressed because it is too large
+ 0 - 0
26/build/js/built.4e39acd655.js.map


File diff suppressed because it is too large
+ 0 - 0
26/build/js/built.8cf06b6f63.js


File diff suppressed because it is too large
+ 0 - 0
26/build/js/built.8cf06b6f63.js.map


+ 1 - 0
26/build/media/1feff74faa.bin
View File 

@@ -0,0 +1 @@
 
+__webpack_public_path__ = __webpack_base_uri__ = htmlWebpackPluginPublicPath;

+ 2 - 0
26/build/service-worker.js
View File 

@@ -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

+ 1 - 0
26/build/service-worker.js.map
View File 

@@ -0,0 +1 @@
 
+{"version":3,"file":"service-worker.js","sources":["../../../AppData/Local/Temp/d38f1729907e97d66f991969dace4e58/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"}

File diff suppressed because it is too large
+ 0 - 0
26/build/workbox-47687e40.js


File diff suppressed because it is too large
+ 0 - 0
26/build/workbox-47687e40.js.map


+ 12 - 0
26/server.js
View File 

@@ -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)

+ 6 - 0
26/src/css/index.css
View File 

@@ -0,0 +1,6 @@
 
+html,body{

+    margin:0;

+    padding:0;

+    height:100%;

+    background:red;

+}

+ 12 - 0
26/src/index.html
View File 

@@ -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>

+ 24 - 0
26/src/js/index.js
View File 

@@ -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');
 
+      });
 
+  });
 
+}

+ 6 - 0
26/src/js/test.js
View File 

@@ -0,0 +1,6 @@
 
+export function mul(x, y) {
 
+  return x * y;
 
+}
 
+export function count(x, y) {
 
+  return x - y;
 
+}

+ 163 - 0
26/webpack.config.js
View File 

@@ -0,0 +1,163 @@
 
+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')

+/**

+ * 

+ */

+//复用loader

+const commonCssLoader = [

+    MiniCssExtractPlugin.loader, //提取css

+    'css-loader',

+    {

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

+        options: {

+             // 旧版本配置

+            /* ident: 'postcss', s

+            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/,

+                    use:[

+                        //开启多进程打包

+                        /**

+                         * 进程启动大概600ms

+                         * 进程通信也需开销

+                         * 所以适合工作消耗事件比较长，需要多进程打包

+                         */

+                        //'thread-loader',

+                        {

+                            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'

+}

+ 1 - 0
README.md
View File 

@@ -30,6 +30,7 @@ npx webpack serve
 
 * 23: code split 代码分割

 * 23: code split 代码分割

 * 24: 懒加载和预加载

 * 24: 懒加载和预加载

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

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

+* 26: 多进程打包

 

 

 ## 关于

 ## 关于

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

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

+ 2 - 1
package.json
View File 

@@ -24,6 +24,7 @@
 
     "postcss-loader": "^6.1.1",
 
     "postcss-loader": "^6.1.1",
 
     "postcss-preset-env": "^6.7.0",
 
     "postcss-preset-env": "^6.7.0",
 
     "style-loader": "^3.2.1",
 
     "style-loader": "^3.2.1",
 
+    "thread-loader": "^3.0.4",
 
     "url-loader": "^4.1.1",
 
     "url-loader": "^4.1.1",
 
     "webpack": "^5.48.0",
 
     "webpack": "^5.48.0",
 
     "webpack-cli": "^4.7.2",
 
     "webpack-cli": "^4.7.2",
 
@@ -47,7 +48,7 @@
 
     "rules": {
 
     "rules": {
 
       "no-console": "off"
 
       "no-console": "off"
 
     },
 
     },
 
-    "env":{
 
+    "env": {
 
       "browser": true
 
       "browser": true
 
     }
 
     }
 
   }
 
   }

Some files were not shown because too many files changed in this diff