3 years ago · bb9d15a64a
--- a/28/.gitignore
+++ b/28/.gitignore
@@ -0,0 +1 @@
 
				+build/
			
--- a/28/dll/jquery.js
+++ b/28/dll/jquery.js
--- a/28/dll/jquery.js.LICENSE.txt
+++ b/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
			
 
				+ */
			
--- a/28/dll/manifest.json
+++ b/28/dll/manifest.json
@@ -0,0 +1 @@
 
				+{"name":"jquery_9f477d95b61aff0cb116","content":{"../node_modules/_jquery@3.6.0@jquery/dist/jquery.js":{"id":660,"buildMeta":{}}}}
			
--- a/28/src/index.html
+++ b/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>
			
--- a/28/src/index.js
+++ b/28/src/index.js
@@ -0,0 +1,3 @@
 
				+import $ from 'jQuery'

			
 
				+

			
 
				+console.log($)
			
--- a/28/webpack.config.js
+++ b/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'

			
 
				+}
			
--- a/28/webpack.dll.js
+++ b/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'

			
 
				+}
			
--- a/README.md
+++ b/README.md
@@ -31,7 +31,8 @@ npx webpack serve
 
				 * 24: 懒加载和预加载

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

			
 
				 * 26: 多进程打包

			
 
				-* 27：externals 

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

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

			
 
				 

			
 
				 ## 关于

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

			
--- a/package.json
+++ b/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",
		`@@ -0,0 +1 @@`
		`+{"name":"jquery_9f477d95b61aff0cb116","content":{"../node_modules/_jquery@3.6.0@jquery/dist/jquery.js":{"id":660,"buildMeta":{}}}}`