淘先锋技术网

首页 1 2 3 4 5 6 7

webpack 基础入门 - 了解webpack

webpack
在学习webpack之前先来了解一下什么是webpack,为什么要使用webpack,和其他的同类型软件有什么区别。

什么是webpack?

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

根据官方的说明,通俗来讲可以分为一下几个方面

  1. 针对于 javascript 应用程序的
  2. 是一个静态模块打包器
  3. 根据模块间的依赖关系,将这些模块打包成一个或者多个文件。

常见的打包工具还有哪些,他们之间的区别是什么?

通过介绍已经知道 webpack 工具的作用,webpack是构建工具中的一种,那么相同类型的还有其他工具吗,答案是肯定有的。那常见的构建工具有哪些,他们之间的区别是什么呢?

  1. Grunt。是一个任务执行者,有大量现成的插件封装了常见的任务,也能管理任务之间的依赖关系,自动化地执行依赖的任务,每个任务的具体执行代码和依赖关系写在配置文件里。优点:灵活,它只负责执行我们定义的任务;大量的可复用插件封装好了常见的构建任务。缺点是集成度不高,要写很多配置后才可以用,无法做到开箱即用。
  2. Gulp。是一个基于流的自动化构建工具。除了可以管理和执行任务,还支持监听文件、读写文件。优点是好用又不失灵活,既可以单独完成构建,也可以和其他工具搭配使用。其缺点和Grunt类似,集成度不高,要写很多配置后才可以用,无法做到开箱即用。
  3. Fis。是来自百度的开源构建工具。相对于Grunt、Gulp这些只提供了基本功能的工具,Fis内置了许多功能,无须做太多配置就能完成大量工作。
  4. Webpack。专注于构建模块化项目。专注于处理模块化的项目,能做到开箱即用、一步到位;可通过Plugin扩展,完整好用又不失灵活;使用场景不局限于Web开发;社区庞大活跃,经常引入紧跟时代发展的新特性,能为大多数场景找到已有的开源扩展;良好的开发体验。Webpack的缺点是只能用于采用模块化开发的项目。

为什么要使用 webpack?

前端技术发展之快,各种可以提高开发效率的新思想和框架层出不穷。但是它们都有一个共同点:源代码无法直接运行,必须通过转换后才可以正常运行。同时还有需要如下的处理:代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布。构建其实是工程化、自动化思想在前端开发中的体现,将一系列流程用代码去实现,让代码自动化地执行这一系列复杂的流程。构建为前端开发注入了更大的活力,解放了我们的生产力。

因为种种方面的原因,我们借助于构建工具来解决复杂的问题同时提高工作效率。webpack 与其他构建工具我们已经做了对比,如果项目中更加的注重模块化的开发,那么webpack就是不二的选择。


webpack 版本

目前 webpack 已经更新到 v4.0 版本,相对于之前的版本也有所调整:

  1. 不再支持Node.js 4
  2. 支持多种模块类型
  3. 用mode属性区分环境
  4. 零配置模块打包
  5. 更快的构建时间
  6. 全新的插件系统
  7. 到webpack-cli的改变 该版本的更新做了更多的优化处理,同时也使得入门学习变得简单。

webpack 安装

准备条件:

webpack 是基于 node.js 开发的,所以其运行要保证是最新的 node.js 版本。如果版本过低则可能遇到各种问题。

本地安装

运行webpack 4.0 版本需要同时安装 webpack-cli 。对于多数项目还是建议使用本地安装,一方面是保证每个项目都有独立的webpack 配置方案,方便设置与修改,避免导致多个项目共同使用造成的环境配置冲突的问题。

安装命令如下:

`npm install --save-dev webpack webpack-cli`
复制代码

全局安装

webpack 也提供了全局安装的方式

`npm install --global webpack`
复制代码

概念了解

在开始学习webpack 之前,有几个核心的概念需要掌握。

  1. 入口(entry)

    入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。

  2. 出口[output]

    output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。

  3. 依赖[loader]

    loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。

  4. 插件(plugins)

    loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。

  5. 模式(mode)

    通过选择 development 或 production 之中的一个,来设置 mode 参数,你可以启用相应模式下的 webpack 内置的优化

转载于:https://juejin.im/post/5c9b0488e51d4569137538d7