当先锋百科网

首页 1 2 3 4 5 6 7

初识webpack5

前言

本指南章节包含安装 webpack 的各种安装方法还有一些简单的理解。

在这里插入图片描述
在这里插入图片描述

提示：以下是本篇文章正文内容，下面案例可供参考

一、webpack5的安装

注意:

      安装webpack之前，请你先确定一下你的Node.js 是10版本以上，当然最好是最新版的Node.js。

本地安装

本地安装最新稳定版本的webpack请执行以下命令：

npm install --save-dev webpack

全局安装

全局安装最新稳定版本的webpack请执行以下命令：

npm install --global webpack

注意：不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。

最新体验版版安装（测试版本）

如果你想体验一下webpack的一些还没有发布的功能，那么请执行下面的命令：

npm install webpack@beta

安装这些最新体验版本时要小心！它们可能仍然包含 bug，因此不应该用于生产环境。

二、webpack5

Webpack = Web Package

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle(包)。

自我总结：webpack 是 静态模块打包工具，它会将项目的文件进行模块化处理，然后根据依赖关系进行静态分析，生成一个或者多个被打包好的文件bundle(包)，可以由浏览器加载。webpack是一款能编译、能格式化效验、能压缩、还能打包打包，所以也可以说webpack是一款打包构建工具。

模块：（模块化开发，可以提高开发效率，避免重复造轮子）
打包：（将各个模块，按照一定的规则组装起来）
官网：Webpack
特点：功能强大（打包、构建、发布web服务），学习成本大
比喻：
​ @模块化源码：油、盐、西红柿、鸡蛋、葱花、香菜
​ @构建工具：webpack => 厨师
​ @生产代码：西红柿炒鸡蛋
构建过程：
​ 源代码 =》编码、格式化效验、压缩… =》生产代码
构建（转换）：把不支持的代码，转成支持的代码
打包过程：
​ 开发过程：index.js、nav.js、tab.js、button.js、scroll.js…
            ↓
​ 生产阶段：bundle.js
打包（合并）：把多个文件合并成一个文件

三、webpack的功能

  • 将多个文件合并（打包），减少HTTP请求，从而提高效率。
  • 对代码进行编译，确保浏览器的兼容性
  • 对代码进行压缩，减少文件体积，提高加载速度
  • 检测段代码格式，确保代码质量
  • 提供热更新服务，提高开发效率
  • 针对不用环境，提供不同的打包策略

四、webpack 的发展历史

  • 2012年3月10日，webpack诞生
  • 2014年2月，webpack 1
  • 2016年12月，webpack 2
  • 2017年6月，webpack 3
  • 2018年2月，webpack 4
  • 2020年10月，webpack 5（Node.js 10.13+）

注意：Node.js 的版本必须是10版本往上

五、webpack核心概念

入口（Entry）

  • 打包时，第一个被访问的源码文件
  • 默认时 src/index.js（可以 通过配置文件指定）
  • webpack 通过入口，加载整个项目的依赖

出口（Output）

  • 打包后，输出的文件名称
  • 默认时dist/main.js（可以 通过配置文件指定）

加载器（Loader）

插件（Plugins）

  • 实现 loader 之外的其他功能
    • Plugin是Webpack的支柱，用来实现丰富的功能
  • 命名方式：xxx-webpack-plugin（html-webpack-plugin）
    • 以-webpack-plugin
  • 常用插件：wenpack插件列表

模式（Mode）

  • 用来区分环境的关键字
    • 不同环境的打包逻辑不同，因此，需要区分
  • 三种模式
    • development （自动优化打包速度，添加一些调试过程种的辅助）
    • production （自动优化打包结果）
    • none （运行最原始的打包，不做任何额外处理）

模块（Module）

  • js 模块
  • 一段css
  • 一张图片
  • 等等、等等
  • 详情：webpack模块

依赖图（Dependency Graph）

  • 任何时候，一个文件依赖于另一个文件，webpack 就把此视为文件之间有 依赖关系 。这样可以让你的webpack接受一些非代码资源（其它类型的文件），并且可以把它们作为 依赖 提供给你的应用程序。

在这里插入图片描述

总结

以上就是今天要讲的内容，
本文仅简单的介绍了一下webpack 5 的3种安装方法，
还有一些简单的webpack的基本概念和webpack的核心概念。