صفحهٔ اصلی گشت‌و‌گذار راهنما
ورود
chuck
/
webpackstudy
1
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
فهرست منبع

dll

DESKTOP-MK04A0R\chuck 3 سال پیش
والد
67062f70bb
کامیت
bb9d15a64a
10فایلهای تغییر یافته به همراه105 افزوده شده و 1 حذف شده
مشاهده تقسیم شده نمایش آمار تفاوت ها
  1. 1 0
      28/.gitignore
  2. 1 0
      28/dll/jquery.js
  3. 24 0
      28/dll/jquery.js.LICENSE.txt
  4. 1 0
      28/dll/manifest.json
  5. 12 0
      28/src/index.html
  6. 3 0
      28/src/index.js
  7. 35 0
      28/webpack.config.js
  8. 25 0
      28/webpack.dll.js
  9. 2 1
      README.md
  10. 1 0
      package.json

+ 1 - 0
28/.gitignore
مشاهده فایل 

@@ -0,0 +1 @@
 
+build/

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 1 - 0
28/dll/jquery.js


+ 24 - 0
28/dll/jquery.js.LICENSE.txt
مشاهده فایل 

@@ -0,0 +1,24 @@
 
+/*!
 
+ * Sizzle CSS Selector Engine v2.3.6
 
+ * https://sizzlejs.com/
 
+ *
 
+ * Copyright JS Foundation and other contributors
 
+ * Released under the MIT license
 
+ * https://js.foundation/
 
+ *
 
+ * Date: 2021-02-16
 
+ */
 
+
 
+/*!
 
+ * jQuery JavaScript Library v3.6.0
 
+ * https://jquery.com/
 
+ *
 
+ * Includes Sizzle.js
 
+ * https://sizzlejs.com/
 
+ *
 
+ * Copyright OpenJS Foundation and other contributors
 
+ * Released under the MIT license
 
+ * https://jquery.org/license
 
+ *
 
+ * Date: 2021-03-02T17:08Z
 
+ */

+ 1 - 0
28/dll/manifest.json
مشاهده فایل 

@@ -0,0 +1 @@
 
+{"name":"jquery_9f477d95b61aff0cb116","content":{"../node_modules/_jquery@3.6.0@jquery/dist/jquery.js":{"id":660,"buildMeta":{}}}}

+ 12 - 0
28/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 id="title">hello</h1>

+</body>

+</html>

+ 3 - 0
28/src/index.js
مشاهده فایل 

@@ -0,0 +1,3 @@
 
+import $ from 'jQuery'

+

+console.log($)

+ 35 - 0
28/webpack.config.js
مشاهده فایل 

@@ -0,0 +1,35 @@
 
+

+const {resolve} = require('path')

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

+const webpack = require('webpack')

+const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin')

+module.exports = {

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

+    output:{

+        filename: 'built.js',

+        path: resolve(__dirname,'build')

+    },

+    module:{

+        rules:[

+

+        ]

+    },

+    plugins:[

+        new htmlWebpackPlugin({

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

+        }),

+        //无需打包 动态连接

+        new webpack.DllReferencePlugin({

+            manifest: resolve(__dirname,'dll/manifest.json')

+        }),

+        //自动引入

+        new AddAssetHtmlWebpackPlugin({

+            filepath: resolve(__dirname,'dll/jquery.js'),

+            // 文件输出目录

+            outputPath: 'auto',

+            // 脚本或链接标记的公共路径

+            publicPath: 'auto'

+        })

+    ],

+    mode:'production'

+}

+ 25 - 0
28/webpack.dll.js
مشاهده فایل 

@@ -0,0 +1,25 @@
 
+/**

+ * 使用dll技术，对某些（第三方库：jquery react vue）进行单独打包

+ * webpack打包时，默认查找webpack.config.js文件

+ * webpack --config webpack.dll.js

+ */

+const {resolve} = require('path')

+const webpack = require('webpack')

+module.exports = {

+    entry:{

+        jquery:['jquery']

+    },

+    output:{

+        filename:'[name].js',

+        path:resolve(__dirname,'dll'),

+        library: '[name]_[hash]'    //打包的库里面向外暴露出的内容名字

+    },

+    plugins:[

+        //打包生成一个manifest.json 

+        new webpack.DllPlugin({

+            name:'[name]_[hash]',//映射库的暴露的内容名称

+            path:resolve(__dirname,'dll/manifest.json')

+        })

+    ],

+    mode: 'production'

+}

+ 2 - 1
README.md
مشاهده فایل 

@@ -31,7 +31,8 @@ npx webpack serve
 
 * 24: 懒加载和预加载

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

 * 26: 多进程打包

-* 27：externals 

+* 27：externals -- 无需打包，比如cdn引入

+* 28: dll -- 需要打包一次，无需重复打包

 

 ## 关于

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

+ 1 - 0
package.json
مشاهده فایل 

@@ -6,6 +6,7 @@
 
     "@babel/core": "^7.15.0",
 
     "@babel/polyfill": "^7.12.1",
 
     "@babel/preset-env": "^7.15.0",
 
+    "add-asset-html-webpack-plugin": "^3.2.0",
 
     "babel-loader": "^8.2.2",
 
     "core-js": "^3.16.1",
 
     "css-loader": "^6.2.0",

برخی فایل ها در این مقایسه diff نمایش داده نمی شوند زیرا تعداد فایل ها بسیار زیاد است