DESKTOP-MK04A0R\chuck 3 yıl önce
ebeveyn
işleme
67062f70bb
5 değiştirilmiş dosya ile 52 ekleme ve 0 silme
  1. 1 0
      27/.gitignore
  2. 16 0
      27/src/index.html
  3. 2 0
      27/src/index.js
  4. 32 0
      27/webpack.config.js
  5. 1 0
      README.md

+ 1 - 0
27/.gitignore

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

+ 16 - 0
27/src/index.html

@@ -0,0 +1,16 @@
+<!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
+  src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
+  integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
+  crossorigin="anonymous"></script>
+</head>
+<body>
+    <h1 id="title">hello</h1>
+</body>
+</html>

+ 2 - 0
27/src/index.js

@@ -0,0 +1,2 @@
+import $ from 'jQuery'
+console.log($)

+ 32 - 0
27/webpack.config.js

@@ -0,0 +1,32 @@
+/**
+ * loader: 1下载 2使用
+ * plugins:1下载 2引入 3使用
+ */
+const {resolve} = require('path')
+const htmlWebpackPlugin = require('html-webpack-plugin')
+module.exports = {
+    entry: './src/index.js',
+    output:{
+        filename: 'js/built.js',
+        path: resolve(__dirname,'build')
+    },
+    module:{
+        rules:[
+
+        ]
+    },
+    plugins:[
+        // html-webpack-plugin
+        // 默认创建一个空的html文件 自动引入打包输出的所有资源(js/css)
+        // 需要有解构的html文件
+        new htmlWebpackPlugin({
+            // 复制该文件,并自动引入打包输出的所有资源
+            template: './src/index.html'
+        })
+    ],
+    mode:'production',
+    externals:{
+        //忽略 库名 -- 包名
+        jquery: 'jQuery'
+    }
+}

+ 1 - 0
README.md

@@ -31,6 +31,7 @@ npx webpack serve
 * 24: 懒加载和预加载
 * 25:PWA 可离线访问 -- 缓存
 * 26: 多进程打包
+* 27:externals 
 
 ## 关于
 用于学习webpack配置,包括css、less、图片资源、其他资源、开发环境等配置。