site infoHacknerd | Tech Blog
blog cover

♟️ [Webpack实战: 入门、进阶与调优] 1. 简介

JavaScriptWebpack

什么是Webpack

Webpack是一个开源的JavaScript模块打包工具，其最核心的功能是解决模块之间的依赖，把各个模块按照特定的规则和顺序组织在一起，最终合并为一个JS文件（有时会有多个，这里讨论的只是最基本的情况)。这个过程就叫作模块打包。

为什么需要Webpack

应用规模增大后需要模块化切割代码，不然维护成本会变高。但有很长一段时间，Javascript 是没有模块化的概念的。当有多个脚本需要开发人员手动添加<script> 维护脚本加载顺序，这会存在一些问题：

  • 1.多个script 之间通常会有隐式依赖关系，除了添加注解很难清楚指明谁依赖了谁。
  • 2.多个script 意味着多个http请求，在http2 出现之前建立一次连接都需要经历TCP三次握手(HTTP 1.0)，或等待上个HTTP请求响应之后再发送下一个(HTTP 1.1）。建立连接成本高，拖慢网页渲染速度。
  • 3.每个script 全局作用域都为window 容易造成全局作用域污染。

    • 所以需要模块化解决上述问题。

  • 1.导入导出语句明确模块依赖关系
  • 2.打包工具可以合并资源文件，减少网络开销
  • 3.模块之间作用域隔离，不会存在命名冲突

    • 用到的打包工具，用于解决模块的依赖关系，使打包后的结果能运用到浏览器上。主要有两种工作方式:

  • 1.将依合并到单个js文件，一次性加载进界面
  • 2.在界面初始化时，加载入口文件，其他模块异步加载

    • webpack 的优势：

  • 1.支持多种模块标准，AMD， CommonJS，ES6模块化。
  • 2.代码分割。首屏只加载必要部分，提供首页渲染速度。
  • 3.可以处理其他各类资源。比如CSS，PNG，通过Loader 开发者只需使用import 资源即可导入。
  • 4.拥有庞大的社区。

    • 打包

  • 1.npm intall webpack webpack-cli --save-dev
  • 2.编写 package.json
    • jsonCopy
    {
	"script": {
		"build" : "npx webpack --entry=${entry path} --output-filename=${file name}",
		// 或 "npx webpack --config ${webpack config path} "
	}
}

  • 1.执行编译 npm run build

    • webpack-dev-server

    简单使用webpack进行开发调试效率不高，需要构建完后刷新界面看到效果。

    Webpack社区提供了便捷的本地开发工具webpack-dev-server 。它有以下功能:

  • 使用Webapck进行模块打包。
  • Web Server 处理静态文件请求。
  • live-reloading 发现源工程文件更新会自动刷新浏览器。

    • 注意 webpack-dev-server会将打包结果存放在内存，并不会实际向硬盘写入构建文件。

  • 1.使用webpack-dev-server

    • Contents

    • 什么是Webpack
    • 为什么需要Webpack
    • 打包
    • webpack-dev-server
    2024/05/26 02:29