工程化
文章平均质量分 81
吕布辕门
逆水行舟,不进则退!
展开
-
webpack 管理资源
如果你是从开始一直遵循着指南的示例,现在会有一个小项目,显示 “Hello webpack”。现在我们尝试整合一些其他资源,比如图像,看看 webpack 如何处理。像 webpack 这样的工具,将**动态打包(dynamically bundle)**所有依赖项。这是极好的创举,因为现在每个模块都可以明确表述它自身的依赖,我们将避免打包未使用的模块。webpack 最出色的功能之一就是,除了 JavaScript,还可以通过 loader 引入任何其他类型的文件。也就是说,以上列出的那些 JavaScr原创 2022-06-09 09:00:00 · 364 阅读 · 7 评论 -
webpack 快速开始
webpack 用于编译 JavaScript 模块。一旦完成安装,你就可以通过 webpack 的 CLI或 API与其配合交互。首先我们创建一个目录,初始化 npm,然后 在本地安装 webpack,接着安装 webpack-cli(此工具用于在命令行中运行 webpack):现在我们将创建以下目录结构、文件和内容:projectsrc/index.jsindex.html我们还需要调整 文件,以便确保我们安装包是,并且移除 入口。这可以防止意外发布你的代码。package.json在此原创 2022-06-08 08:30:00 · 343 阅读 · 1 评论 -
安装 webpack 的各种方法
本指南介绍了安装 webpack 的各种方法。在开始之前,请确保安装了 Node.js 的最新版本。使用 Node.js 最新的长期支持版本(LTS - Long Term Support),是理想的起步。使用旧版本,你可能遇到各种问题,因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。要安装最新版本或特定版本,请运行以下命令之一:如果你使用 webpack 4+ 版本,你还需要安装 CLI。对于大多数项目,我们建议本地安装。这可以使我们在引入破坏式变更(breaking c原创 2022-06-07 07:45:00 · 845 阅读 · 0 评论 -
webpack 基本概念
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。从 webpack v4.0.0 开始,可以不用引入一个配置文件。然而,webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念:本文档旨在给出这些概念的高度概述,同时提供具体概念的详尽相关用例。*原创 2022-06-06 10:12:21 · 253 阅读 · 0 评论