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

原生页面引入Webpack打包JS

news 2026/3/22 11:40:50

Webpack简介

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

打包Javascript

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

初始化项目：
- 创建一个新的文件夹作为你的项目根目录。
- 在该文件夹中打开终端或命令提示符。
- 运行npm init -y来初始化一个新的npm项目，这将创建一个package.json文件。
安装Webpack及其CLI：
- 运行npm install --save-dev webpack webpack-cli来安装Webpack和Webpack CLI。
创建项目结构：
- 在项目根目录下创建一个src文件夹，用于存放源代码。
- 在src文件夹中创建一个index.js文件，作为Webpack的入口点。
- 在项目根目录下创建一个dist文件夹，用于存放Webpack打包后的输出文件。
- 在项目根目录下创建一个index.html文件，作为你的HTML模板。
配置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配置选项...  
};

编写源代码：
- 在src/index.js中编写你的JavaScript代码。
编写HTML模板：
- 在index.html中编写你的HTML代码，并在<body>标签的底部引入Webpack打包后的输出文件（例如<script src="dist/bundle.js"></script>）。
打包项目：
- 在项目根目录下的package.json文件中添加一个构建脚本，例如"build": "webpack"。
- 运行npm run build来打包项目。Webpack将根据webpack.config.js中的配置将src/index.js及其依赖打包成一个bundle.js文件，并输出到dist文件夹中。
查看结果：
- 打开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简介

打包Javascript

页面引入Javascript

相关文章：

原生页面引入Webpack打包JS

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

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

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

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

LeetCode：459重复的子字符串

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

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

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

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

Spring AOP 使用方法总结

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

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

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

js面试问题笔记(一)

pip 和 pipx 的主要区别？

4457M数字示波器

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

Tomcat作为web的优缺点

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

Java环境搭建后系统响应变慢怎么办

ChatGPT实战：如何用思维链推理提升数学解题准确率（附Prompt模板）

2026程序员破局指南：大模型技能是未来，收藏这份转型路线图

HUNYUAN-MT 7B翻译终端轻量部署方案：在低显存GPU上的优化与调参

Windows HEIC缩略图终极解决方案：让苹果照片在PC上瞬间预览

从伪随机到真破解：LCG算法在CTF中的6种攻击姿势

1.6 面对攻击的网络 | 计算机网络的安全防线

DWIN DMT48270C043_06WT触控屏开发避坑指南：从硬件选型到固件下载全流程

Trelby 剧本写作软件：架构解析与配置指南

DVWA文件包含漏洞实战：从Low到Impossible的四种防御策略解析