当前位置： 首页 > news >正文

原生页面引入Webpack打包JS

news 2025/12/22 0:44:33

Webpack简介

  1. 概述：
    • Webpack是一个现代JavaScript应用程序的静态模块打包器。
    • 它将应用程序中的每个文件视为一个模块，并通过配置规则来解析这些模块之间的依赖关系，最终将其打包成一个或多个浏览器可以执行的文件。
  2. 动态加载（Code Splitting）：
    • Webpack支持代码分割，允许开发者将代码分割成多个块（chunk），并在需要时按需加载。
    • 这可以通过使用动态import()语法来实现，它返回一个Promise对象，用于处理模块加载成功或失败的情况。
  3. 配置与加载器：
    • Webpack的配置文件通常命名为webpack.config.js，其中包含了入口点、输出文件、加载器、插件等配置信息。
    • 加载器（loader）用于转换不同类型的模块为Webpack能够处理的模块。例如，babel-loader用于将ES6+代码转换为浏览器兼容的ES5代码，css-loader用于处理CSS文件等。
  4. 插件系统：
    • Webpack的插件系统允许开发者通过监听Webpack构建过程中的事件来执行特定操作。
    • 例如，HtmlWebpackPlugin插件可以自动生成HTML文件并注入打包后的JS/CSS文件。
  5. 热更新（Hot Module Replacement, HMR）：
    • Webpack支持热更新功能，当源代码发生变化时，Webpack会自动重新编译受影响的模块，并替换旧模块。
    • 这使得开发者可以在不刷新页面的情况下实时看到代码的变化，提高了开发效率。

打包Javascript

在原生HTML中配置一个Webpack项目通常意味着你需要手动引入Webpack打包后的输出文件（例如bundle.js或main.js），而不是让Webpack直接处理HTML文件。以下是一个基本的步骤指南，帮助你在原生HTML中配置Webpack项目：

  1. 初始化项目：

    • 创建一个新的文件夹作为你的项目根目录。
    • 在该文件夹中打开终端或命令提示符。
    • 运行npm init -y来初始化一个新的npm项目，这将创建一个package.json文件。

  2. 安装Webpack及其CLI：

    • 运行npm install --save-dev webpack webpack-cli来安装Webpack和Webpack CLI。

  3. 创建项目结构：

    • 在项目根目录下创建一个src文件夹，用于存放源代码。
    • 在src文件夹中创建一个index.js文件，作为Webpack的入口点。
    • 在项目根目录下创建一个dist文件夹，用于存放Webpack打包后的输出文件。
    • 在项目根目录下创建一个index.html文件，作为你的HTML模板。

  4. 配置Webpack：

    • 在项目根目录下创建一个webpack.config.js文件，用于配置Webpack。

webpack.config.js示例：

const path = require('path');  module.exports = {  entry: './src/index.js', // 入口文件  output: {  filename: 'bundle.js', // 输出文件名  path: path.resolve(__dirname, 'dist') // 输出目录  },  module: {  rules: [  // 在这里添加加载器配置（如Babel、CSS等）  ]  },  // 其他Webpack配置选项...  
};

  1. 编写源代码：

    • 在src/index.js中编写你的JavaScript代码。

  2. 编写HTML模板：

    • 在index.html中编写你的HTML代码，并在<body>标签的底部引入Webpack打包后的输出文件（例如<script src="dist/bundle.js"></script>）。

  3. 打包项目：

    • 在项目根目录下的package.json文件中添加一个构建脚本，例如"build": "webpack"。
    • 运行npm run build来打包项目。Webpack将根据webpack.config.js中的配置将src/index.js及其依赖打包成一个bundle.js文件，并输出到dist文件夹中。

  4. 查看结果：

    • 打开index.html文件（你可以直接在浏览器中打开，或者使用一个简单的HTTP服务器如live-server）。
    • 确保页面能够正确加载并显示你编写的JavaScript代码的效果。

请注意，如果你想要Webpack自动处理HTML文件（例如自动注入打包后的脚本标签），你可以使用html-webpack-plugin插件。但是，在这个基本的例子中，我们手动在HTML文件中引入了打包后的输出文件，以展示如何在原生HTML中配置Webpack项目。

 页面引入Javascript

//bundle.js
// 导出一个函数  
export function greet(name) {  return `Hello, ${name}!`;  
}
---------------------------------------------------
<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Dynamic Import Example</title>  <script>  // 定义一个函数来动态加载模块  function loadModule() {  // 使用动态import()语法异步加载模块  import('./bundle.js')  .then(module => {  // 模块加载成功，使用导入的函数  const message = module.greet('World');  console.log(message); // 输出: Hello, World!  })  .catch(error => {  // 模块加载失败，处理错误  console.error('Failed to load module:', error);  });  }  // 在页面加载完成后调用loadModule函数  window.onload = loadModule;  </script>  
</head>  
<body>  <h1>Dynamic Import Example</h1>  
</body>  
</html>

相关文章：

原生页面引入Webpack打包JS

Webpack简介 概述&#xff1a; Webpack是一个现代JavaScript应用程序的静态模块打包器。它将应用程序中的每个文件视为一个模块&#xff0c;并通过配置规则来解析这些模块之间的依赖关系&#xff0c;最终将其打包成一个或多个浏览器可以执行的文件。动态加载&#xff08;Code …...

编程日记 2024/10/29 18:38:52

健康之路押注医药零售：毛利率下滑亏损扩大，医疗咨询人次大幅减少

《港湾商业观察》黄懿 2024年9月13日&#xff0c;健康之路股份有限公司&#xff08;下称“健康之路”&#xff09;再次递表港交所&#xff0c;建银国际为独家保荐人。健康之路国内运营主体为健康之路&#xff08;中国&#xff09;信息技术有限公司和福建健康之路信息技术有限公…...

编程日记 2024/10/29 18:37:51

【人工智能-初级】第7章 聚类算法K-Means：理论讲解与代码示例

文章目录 一、K-Means聚类简介二、K-Means 聚类的工作原理2.1 初始化簇中心2.2 分配簇标签2.3 更新簇中心2.4 迭代重复2.5 K-Means 算法的目标三、K-Means 聚类的优缺点3.1 优点3.2 缺点四、K 值的选择五、Python 实现 K-Means 聚类5.1 导入必要的库5.2 生成数据集并进行可视化…...

编程日记 2024/10/29 18:36:45

HOT 100 技巧题（136/169/75/31/287）

136. 只出现一次的数字 技巧类型题目&#xff0c;通过异或运算实现 169. 多数元素 三种常见解法&#xff1a;1. 哈希2. 排序3. 投票法 75. 颜色分类 单指针 两次遍历&#xff1a;第一次遍历把所有0都交换到前面&#xff0c;记录最后一个0的位置index&#xff0c;第二次遍…...

编程日记 2024/10/29 18:33:42

什么是时间戳？怎么获取？有什么用？

在 JavaScript 中&#xff0c;时间戳通常表示为自 1970 年 1 月 1 日 00:00:00 UTC 以来的毫秒数。我们可以使用 Date 对象来获取当前时间的时间戳&#xff0c;或者将特定的日期转换为时间戳。在JavaScript中&#xff0c;时间戳通常以毫秒为单位表示。 如何获取时间戳 在Java…...

编程日记 2024/10/29 18:32:39

LeetCode：459重复的子字符串

给定一个非空的字符串 s &#xff0c;检查是否可以通过由它的一个子串重复多次构成。 示例 1: 输入: s "abab" 输出: true 解释: 可由子串 "ab" 重复两次构成。示例 2: 输入: s "aba" 输出: false示例 3: 输入: s "abcabcabcabc" 输…...

编程日记 2024/10/29 18:30:37

【含开题报告+文档+PPT+源码】基于SSM的旅游与自然保护平台开发与实现

开题报告 围场县拥有丰富的自然景观和野生动植物资源&#xff0c;同时面临着旅游业发展和自然保护之间的平衡问题&#xff0c;通过强调自然保护&#xff0c;这个平台可以教育游客如何尊重和保护当地的生态环境。同时&#xff0c;平台还可以提供关于生态保护的信息&#xff0c;…...

编程日记 2024/10/29 18:28:34

【ANTs】医疗影像工具ANTs多种安装方式教程

介绍ANTs的几种简单的安装教程 基于Releases的安装 Github上选择适配自己操作系统的安装包，链接: link 一般使用最新版本。这里官方操作说明，支持Ubuntu、MacOS、CentOS，但是windows有安装包，不知道怎么用。。。 下载后有两个文件夹，bin和lib，bin里面长这样（图示wind…...

编程日记 2024/10/29 18:27:33

想要音频里的人声，怎么把音频里的人声和音乐分开？

在音频处理领域&#xff0c;将音频中的人声和音乐分开是一个常见需求&#xff0c;尤其对于音乐制作、影视后期以及个人娱乐应用来说&#xff0c;这种分离技术显得尤为重要。随着科技的发展&#xff0c;现在已经有多种方法可以实现这一目的。 一、使用专业音频处理软件 市面上有…...

编程日记 2024/10/29 18:26:31

python代码中通过pymobiledevice3访问iOS沙盒目录获取app日志

【背景】 在进行业务操作过程中&#xff0c;即在app上的一些操作&#xff0c;在日志中会有对应的节点&#xff0c;例如&#xff0c;下面是查看设备实时视频过程对应的一些关键节点&#xff1a; 1、TxDeviceAwakeLogicHelper&#xff1a;wakeStart deviceId CxD2BA11000xxxx …...

编程日记 2024/10/29 18:24:28

Spring AOP 使用方法总结

AOP切面编程的最佳应用场景 记录日志性能监控事务管理处理异常数据验证&#xff0c;验证传入参数的正确性&#xff08;一般不用这个方法做&#xff0c;而是用拦截器&#xff09; spring提供了以下注解供开发者使用&#xff0c;编写AOP程序 Aspect 申明切面Pointcut 切点&#…...

编程日记 2024/10/29 18:23:21

LeetCode 每日一题 2024/10/21-2024/10/27

记录了初步解题思路 以及本地实现代码&#xff1b;并不一定为最优 也希望大家能一起探讨 一起进步 目录 10/21 910. 最小差值 II10/22 3184. 构成整天的下标对数目 I10/23 3185. 构成整天的下标对数目 II10/24 3175. 找到连续赢 K 场比赛的第一位玩家10/25 3180. 执行操作可获得…...

编程日记 2024/10/29 18:22:19

不到1500元的I卡可以玩转3A大作吗？撼与科技Intel Arc A750显卡游戏性能实

一、前言 还记得2022年10月的时候&#xff0c;英特尔发布了Arc A750和A770显卡&#xff0c;和此前所发布的DG1、A380不同&#xff0c;这两张显卡可以说是真正意义上的游戏显卡。不知不觉间&#xff0c;两年已经过去了&#xff0c;在这两年期间&#xff0c;英特尔不仅在积极地打…...

编程日记 2024/10/29 18:21:16

STK与MATLAB互联——仿真导航卫星与地面用户间距离和仰角参数

文章目录 构建GPS星座创建单个PRN的GPS卫星创建GPS星座&#xff0c;并为其添加发射机 北斗星座构建搭建低轨铱星星座构建一颗轨道高度为800km/1000km/1200km的低轨卫星构建一颗轨道高度为800km/1000km/1200km的低轨卫星建立地面站&#xff0c;可见性分析确定地面站坐标分析单颗…...

编程日记 2024/10/29 18:16:09

js面试问题笔记(一)

一.热门js面试 1.简述同步和异步的区别? 同步: 浏览器访问服务器请求,用户看到页面刷新 ,重新发请求,等请求完,页面刷新,新内容出现,用户看到新内容,进行下一步操作 异步: 浏览器访问服务器请求,用户正常操作,浏览器后端进行请求,等请求完,页面不刷新,新内容也会出现,用户看到…...

编程日记 2024/10/29 18:15:07

pip 和 pipx 的主要区别？

特性pippipx用途用于安装Python库或命令行应用程序&#xff0c;可以安装带entry points的库专门用于安装和管理Python命令行工具&#xff0c;每个工具都在隔离的虚拟环境中运行虚拟环境不自动创建虚拟环境&#xff0c;需要手动使用 venv 或 virtualenv 创建自动为每个安装的工具…...

编程日记 2024/10/29 18:14:06

4457M数字示波器

_XLT新利通_ 4457M数字示波器 带宽500MHz到3GHz 4457M系列数字示波器产品&#xff0c;包含4457DM/EM/FM/GM四个产品型号&#xff0c;模拟通道数4、8个&#xff0c;带宽500MHz到3GHz&#xff0c;最高采样率10GSa/s&#xff0c;垂直分辨率8bit&#xff0c;最大存储深度2Gpts。…...

编程日记 2024/10/29 18:11:01

【永中软件-注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…...

编程日记 2024/10/29 18:09:58

Tomcat作为web的优缺点

文章目录 优点缺点 优点 开源&#xff1a;Tomcat是Apache软件基金会的一个项目&#xff0c;这意味着它是免费且开放源代码的。这为开发者提供了高度的自由度来修改和扩展其功能。 轻量级&#xff1a;与一些全功能的Java EE应用服务器&#xff08;如IBM WebSphere, Oracle WebL…...

编程日记 2024/10/29 18:08:56

conda虚拟环境中安装cuda方法、遇到的问题

conda虚拟环境中安装cuda方法、遇到的问题 文章目录 conda虚拟环境中安装cuda方法、遇到的问题conda虚拟环境中安装cudacuda.h和cuda_runtime.hpytorch运行时的CUDA版本其他问题检查包冲突nvcc -V和nvidia-smi显示的版本不一致cuda路径 conda虚拟环境中安装cuda 参考文章&…...

编程日记 2024/10/29 18:07:44

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

编程新知 2025/12/21 2:56:11

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2025/12/21 18:00:15

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

编程新知 2025/12/19 10:04:19

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/12/18 20:53:35

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2025/12/18 2:41:24

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

编程新知 2025/12/11 10:24:33

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/9/24 13:35:36

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

编程新知 2025/12/13 7:21:22

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

编程新知 2025/12/14 5:13:32

【Go语言基础【12】】指针：声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

编程新知 2025/6/21 2:18:57