Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
chuck
/
webpackstudy
1
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

js兼容性处理、js压缩、html压缩

DESKTOP-MK04A0R\chuck 3 жил өмнө
parent
8bb28ae0c7
commit
7c30ba7563
17 өөрчлөгдсөн 451 нэмэгдсэн , 1 устгасан
Өөрчлөлтийг ялгаж харах Өөрчлөлтийн статистик харах
  1. 12 0
      13/build/index.html
  2. 238 0
      13/build/js/built.js
  3. 12 0
      13/src/index.html
  4. 14 0
      13/src/js/index.js
  5. 58 0
      13/webpack.config.js
  6. 1 0
      14/build/index.html
  7. 1 0
      14/build/js/built.js
  8. 12 0
      14/src/index.html
  9. 14 0
      14/src/js/index.js
  10. 21 0
      14/webpack.config.js
  11. 1 0
      15/build/index.html
  12. 1 0
      15/build/js/built.js
  13. 13 0
      15/src/index.html
  14. 14 0
      15/src/js/index.js
  15. 27 0
      15/webpack.config.js
  16. 3 0
      README.md
  17. 9 1
      package.json

+ 12 - 0
13/build/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>

+<script defer src="js/built.js"></script></head>

+<body>

+    

+</body>

+</html>

Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 238 - 0
13/build/js/built.js


+ 12 - 0
13/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>

+    

+</body>

+</html>

+ 14 - 0
13/src/js/index.js
Файл харах 

@@ -0,0 +1,14 @@
 
+// import '@babel/polyfill';
 
+
 
+const add = (x, y) => x + y;
 
+
 
+console.log(add(2, 3));
 
+
 
+const promise = new Promise((resolve) => {
 
+  setTimeout(() => {
 
+    console.log('hihihi');
 
+    resolve();
 
+  }, 1000);
 
+});
 
+
 
+console.log(promise);

+ 58 - 0
13/webpack.config.js
Файл харах 

@@ -0,0 +1,58 @@
 
+const {resolve} = require('path')

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

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

+module.exports = {

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

+    output:{

+        filename:'js/built.js',

+        path:resolve(__dirname,'build')

+    },

+    module:{

+        rules:[

+            /*

+            1、js 兼容性处理： babel-loader @babel/core @babel/preset-env

+                只能转换基本语法 类似promise无法转换

+            2、全部js兼容处理： @babel/polyfill

+                比较暴力，全部兼容处理，体积太大

+            3、选择性兼容处理：corejs

+            */

+            {

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

+                                }

+                            }

+                        ]

+                    ]

+                }

+            }

+        ]

+    },

+    plugins:[

+        new HtmlWebpackPlugin({

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

+        }),

+        new EsLintPlugin({

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

+            //exclude: '/node_modules/', //default

+            fix:true

+        })

+    ],

+    mode:'development'

+}

+ 1 - 0
14/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.js"></script></head><body></body></html>

+ 1 - 0
14/build/js/built.js
Файл харах 

@@ -0,0 +1 @@
 
+!function(){console.log(5);const o=new Promise((o=>{setTimeout((()=>{console.log("hihihi"),o()}),1e3)}));console.log(o)}();

+ 12 - 0
14/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>

+    

+</body>

+</html>

+ 14 - 0
14/src/js/index.js
Файл харах 

@@ -0,0 +1,14 @@
 
+// import '@babel/polyfill';
 
+
 
+const add = (x, y) => x + y;
 
+
 
+console.log(add(2, 3));
 
+
 
+const promise = new Promise((resolve) => {
 
+  setTimeout(() => {
 
+    console.log('hihihi');
 
+    resolve();
 
+  }, 1000);
 
+});
 
+
 
+console.log(promise);

+ 21 - 0
14/webpack.config.js
Файл харах 

@@ -0,0 +1,21 @@
 
+const {resolve} = require('path')

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

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

+module.exports = {

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

+    output:{

+        filename:'js/built.js',

+        path:resolve(__dirname,'build')

+    },

+    plugins:[

+        new HtmlWebpackPlugin({

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

+        }),

+        new EsLintPlugin({

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

+            //exclude: '/node_modules/', //default

+            fix:true

+        })

+    ],

+    mode:'production'  //生产环境下会自动压缩

+}

+ 1 - 0
15/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.js"></script></head><body><div></div></body></html>

+ 1 - 0
15/build/js/built.js
Файл харах 

@@ -0,0 +1 @@
 
+!function(){console.log(5);const o=new Promise((o=>{setTimeout((()=>{console.log("hihihi"),o()}),1e3)}));console.log(o)}();

+ 13 - 0
15/src/index.html
Файл харах 

@@ -0,0 +1,13 @@
 
+<!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>

+    <!------fdsfdsfdsf--->

+    <div>    </div>

+</body>

+</html>

+ 14 - 0
15/src/js/index.js
Файл харах 

@@ -0,0 +1,14 @@
 
+// import '@babel/polyfill';
 
+
 
+const add = (x, y) => x + y;
 
+
 
+console.log(add(2, 3));
 
+
 
+const promise = new Promise((resolve) => {
 
+  setTimeout(() => {
 
+    console.log('hihihi');
 
+    resolve();
 
+  }, 1000);
 
+});
 
+
 
+console.log(promise);

+ 27 - 0
15/webpack.config.js
Файл харах 

@@ -0,0 +1,27 @@
 
+const {resolve} = require('path')

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

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

+module.exports = {

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

+    output:{

+        filename:'js/built.js',

+        path:resolve(__dirname,'build')

+    },

+    plugins:[

+        new HtmlWebpackPlugin({

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

+            minify:{

+                //去除空格

+                collapseWhitespace:true,

+                //去除注释

+                removeComments:true

+            }

+        }),

+        new EsLintPlugin({

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

+            //exclude: '/node_modules/', //default

+            fix:true

+        })

+    ],

+    mode:'production'  //生产环境下会自动压缩

+}

+ 3 - 0
README.md
Файл харах 

@@ -14,6 +14,9 @@ npm start
 
 * 10：css兼容性处理  -- postcss-loader postcss-preset-env

 * 11: 压缩css

 * 12：eslint语法检查

+* 13：eslint兼容性处理

+* 14：js压缩

+* 15: html压缩

 

 ## 关于

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

+ 9 - 1
package.json
Файл харах 

@@ -3,6 +3,11 @@
 
     "start": "http-server -a 127.0.0.1 -p 7070"
 
   },
 
   "devDependencies": {
 
+    "@babel/core": "^7.15.0",
 
+    "@babel/polyfill": "^7.12.1",
 
+    "@babel/preset-env": "^7.15.0",
 
+    "babel-loader": "^8.2.2",
 
+    "core-js": "^3.16.1",
 
     "css-loader": "^6.2.0",
 
     "eslint": "^7.32.0",
 
     "eslint-config-airbnb-base": "^14.2.1",
 
@@ -37,6 +42,9 @@
 
     ]
 
   },
 
   "eslintConfig": {
 
-    "extends": "airbnb-base"
 
+    "extends": "airbnb-base",
 
+    "rules": {
 
+      "no-console": "off"
 
+    }
 
   }
 
 }

Энэ ялгаанд хэт олон файл өөрчлөгдсөн тул зарим файлыг харуулаагүй болно