-
WebPack-17-webpack 的概念和基础使用
webpack 的概念和基础使用
我们在小册介绍中提到,webpack 是一个 JS 代码模块化的打包工具,藉由它强大的扩展能力,随着社区的发展,逐渐成为一个功能完善的构建工具。相信开始学习这个小册的同学们多多少少都能够理解为什么前端开发中会使用到 webpack,我们不再详细介绍 webpack 的使用背景,直奔本小节的主题。
安装和使用
我们使用 npm 或者 yarn 来安装 w...
2018-04-23 13:59:43 |
WebPack
-
WebPack-16-底层原理
揭示内部原理
此章节描述 webpack 内部实现,对于插件开发人员可能会提供帮助
打包,是指处理某些文件并将其输出为其他文件的能力。
但是,在输入和输出之间,还包括有 模块, 入口起点, chunk, chunk 组和许多其他中间部分。
主要部分
项目中使用的每个文件都是一个 模块
./index.js
import app from './app.js';
...
2018-04-23 13:59:43 |
WebPack
-
WebPack-15-为什么选择 webpack?
为什么选择 webpack
想要理解为什么要使用 webpack,我们先回顾下历史,在打包工具出现之前,我们是如何在 web 中使用 JavaScript 的。
在浏览器中运行 JavaScript 有两种方法。
第一种方式,引用一些脚本来存放每个功能;此解决方案很难扩展,因为加载太多脚本会导致网络瓶颈。
第二种方式,使用一个包含所有项目代码的大型 .js 文件,但是这会导致作用域、...
2018-04-23 13:59:43 |
WebPack
-
WebPack-14-hot deploy
模块热替换(hot module replacement)
模块热替换(HMR - hot module replacement)功能会在应用程序运行过程中,替换、添加或删除 模块,而无需重新加载整个页面。
主要是通过以下几种方式,来显著加快开发速度:
保留在完全重新加载页面期间丢失的应用程序状态。
只更新变更内容,以节省宝贵的开发时间。
...
2018-04-23 13:59:43 |
WebPack
-
WebPack-13-mainfest
manifest
在使用 webpack 构建的典型应用程序或站点中,有三种主要的代码类型:
你或你的团队编写的源码。
你的源码会依赖的任何第三方的 library 或 “vendor” 代码。
webpack 的 runtime 和 manifest,管理所有模块的交互。
本文将重点介绍这三个部分中的最后部分:runti...
2018-04-23 13:59:43 |
WebPack
-
WebPack-12-target
target
由于 JavaScript 既可以编写服务端代码也可以编写浏览器代码,所以 webpack 提供了多种部署 target,你可以在 webpack 的配置选项中进行设置。
用法
想设置 target 属性,只需在 webpack 配置中设置 target 字段:
webpack.config.js
module.exports = {
target: 'n...
2018-04-23 13:59:43 |
WebPack
-
WebPack-11-依赖图(dependency graph)
依赖图(dependency graph)
每当一个文件依赖另一个文件时,webpack 都会将文件视为直接存在 依赖关系。这使得 webpack 可以获取非代码资源,如 images 或 web 字体等。并会把它们作为 依赖 提供给应用程序。
当 webpack 处理应用程序时,它会根据命令行参数中或配置文件中定义的模块列表开始处理。
从 入口 开始,webpack 会递归的构建一个...
2018-04-23 13:59:43 |
WebPack
-
WebPack-10-module-federation
Module Federation
动机
多个独立的构建可以组成一个应用程序,这些独立的构建之间不应该存在依赖关系,因此可以单独开发和部署它们。
这通常被称作微前端,但并不仅限于此。
底层概念
我们区分本地模块和远程模块。本地模块即为普通模块,是当前构建的一部分。远程模块不属于当前构建,并在运行时从所谓的容器加载。
加载远程模块被认为是异步操作。当使用远程模块时,这些异步操作将被...
2018-04-23 13:59:43 |
WebPack