保存成功
订阅成功
保存失败,请重试
提交成功

Webpack 4.5:从入门到放弃

某大数据公司研发攻城狮,主要负责项目构建与开发,负责过大流量,高并发复杂业务的工作,对性能优化有丰富的实战经验, 曾参与多个大型项目研发。
查看本场Chat

前言

用了 Webpack 4.5 有一段时间了,但是对其貌似缺乏一个具体的了解,最近研究了一下官方文档,参阅了一些博客,写下了一篇文章,希望能给看到同学一些小小的帮助。

第一章 概念

1.1 什么是 Webpack? 为什么要使用 Webpack?

相信很多初学者都会有这个疑问,看了官方的概念也不是很清楚,其实笔者感觉 Webpack 其实没有多么复杂的概念,其主要作用就是打包文件,为什么要打包文件呢?因为打包之后的文件体积会变小,加载起来更快,而且条理更清楚。

上面其实很粗浅的解释,上升来看,Webpack 把一切当成模块,同时具有模块打包的能力。将 css 代码全部加载到<style>中也的确是出于减少 http 请求,当然这是可以配置的,你也可以使用插件把 css 单独打包出来,因为在性能优化方面并不是绝对的,不能说文件越少越好,也不能说文件越小越好,找到一个中立的,最适合当前项目的点就好。

还有就是 Webpack 因为其丰富的扩展性,致使其在开发过程中会基于开发者更多的方便。首当其冲的就是热加载,这个真心在很大程度上方便了开发者的开发。还有一些其他的一些插件,用起来也是美滋滋。

其实跟 Webpack 有类似功能的模块化工具还有跟多,比防说gulp等,但是相比这些,Webpack 有着拆分模块、加载时间少、整合第三方库等优点,所以笔者在这里推荐使用 Webpack。

1.2 Webpack 特点

1.2.1 代码拆分

这是个老生常谈的东西了,Webpack 将异步依赖作为分割点,形成新的块,之后在优化依赖树之后,每一个异步的块都会被打包,条理清晰。

1.2.2 Loader

这个相信用过 Webpack 的人都会知道,但是在这里还是要普及一下。

在 Webpack 里其实只能识别 js,但是实际项目中不可能只用到 js,css、sass 和 less 等经常会用到,这个时候就需要 Loader 来解析这些文件,转化成 js,如此 Webpack 就可以识别了,美滋滋。

1.2.3 插件系统

其实也就是 Plugin 的部分,丰富的插件提供了许多十分方便的功能,在很大程度上丰富了 Webpack 的功能。

1.2.4 运行速度快

官方说 Webpack 使用异步 I/O多级缓存提高运行效率,大大加快了其打包的速度,简直不敢相信。

1.3 小结

综上所述,Webpack 的主要作用就是一个模块打包器,但是有比市面上别的模块打包器强很多的优点,基本上就是这样的一个意思。
还有一点不得不说的说,Webpack 的团队更新频率非常的高,就拿 Webpack4 来说,从 alpha 第一版出来之后,在六个月的时间里更新的 30 次左右。相比其他的开源类库感觉快了很多。当然了,跟最开始的版本更新是没法比的,它从 0.1.01.0.0-bata1 耗时大约两年的时间,更新版本 200 个左右,简直令人发指,而且有的版本仅仅 bata 版就有 30 个。

第二章 开始

基础概念也就是上面所说到了,笔者只是尽量以最简单的想法去理解 Webpack。下面就开始基础的项目构建,也就是从 0 开始构建一个 Webpack 服务。

2.1 项目的新建

首先,电脑上需要 NPM,国内的话 CNPM 速度会更快些。Windows 系统下可以安装 Gitbash,或者使用自带的 PowerShell,这两者都是可以的。

然后全局安装 Webpack。

npm i webpack -g

接下来新建文件夹,并且初始化 NPM。

mkdir demo && cd demo && npm init 

此时在 demo 文件夹内已经有了 package.json 文件,这是 NPM 初始化之后的文件,具体可以访问官方文档

在这个时候,很多博客都会教你怎么样使用 Webpack 去打包一个或者多个文件,但是那样感觉没有任何意义,实际工作很难想象会有人这样使用 Webpack。所以,接下来我们就直接使用 Webpack 构建一个服务,启动整个项目。

对了,这个文件夹里面需要放什么东西后面会讲到,现在先空着。

2.2 webpack.config.js 的内容

下面会将一些 Webpack 的 API,这是重点呦。

2.2.1 基础的构建

先安装 Webpack 的依赖(-D 的意思就是 --save-dev):

npm i webpack webpack-cli -D

在项目的跟目录下新建一个 webpack.config.js 文件,然后在里面写上:

const webpack = require('webpack');
const path = require('path');

const config = {

}

module.exports = config;

基本上就完成了,这么写是有原因的,在下面的章节会讲到。

互动评论
评论
wind3 年前
eslint和环境变量那里有坑 其他还好
评论
查看更多