快速了解Webpack

本文的目的就是让读者对webpack快速的有一个整体的认识,了解其主要的功能。如果对其中某一项感兴趣,详细的使用方式建议查阅webpack官网文档。

首先了解一下gulp与webpack的区别

gulp:强调流程,通过配置一系列的task,定义task处理的事物(例如文件压缩合并、雪碧图、启动server、 版本控制等),然后定义执行顺序,来让gulp执行task,从而构建前端项目的流程。

webpack:是一个前端模块化方案,侧重模块打包,把开发中的所有资源(图片、js文件、css文件等)都看成模块,通过loader(加载器)和plugins(插件)对资源进行处理,打包成符合生产环境部署的前端资源。

相同:

可以文件合并与压缩(css)

不同点:

虽然都是前端自动化构建工具,但看他们的定位就知道不是对等的。
gulp严格上讲,模块化不是他强调的东西,他旨在规范前端开发流程。
webpack更是明显强调模块化开发,而那些文件压缩合并、预处理等功能,不过是他附带的功能。

webpack五个核心概念

  1. Entry – 如何,以哪个文件为起点开始打包,分析构建内部依赖图。
  2. Output – 把bundles输出到哪里,以及如何命名。
  3. Loader – webpack默认只能处理JS,如果需要处理其他必须html/css/img等资源就需要加载对应的Loader。相当于翻译官
  4. Plugins – 做一些功能更复杂的操作,比如压缩代码,定义环境变量,优化插件,语法检查,dll等
  5. Mode – development 本地调试,简单配置,能运行即可。production – 配置各种优化项,保证上线之后的性能

devServer

自动编译,自动打开浏览器,自动刷新

性能优化

开发环境

优化打包构建速度 – HMR
优化代码调式 – sourceMap(压缩后的js文件可以映射到源文件,快速找到代码行)

生成环境

打包速度
代码运行的性能 – oneOf、缓存、tree shanking、代码分割、懒加载、PWA、多进程打包、external、dll。

HMR(hot module replacement) – 热模块替换

监听细微变化进行局部更新
devServer:{
hot:ture
}

oneOf

rules配置项下面把所有的loader都放到oneOf数组里面,性能更好

缓存

只编译代码改变了的模块,其他模块开启babel缓存
rules下的babel-loader配置cacheDirectory:true
文件资源缓存,根据chunk生成hash值
content hash:根据文件的内容生成hash值

tree shaking

去除那些没有使用的代码
前提:

  • 必须es6的模块化方案
  • 开启production环境
    package.json中配置
    sideEffects:[“*.css”] // 保证css不会被摇掉

code split – 代码分割

entry里面配置多个入口,单页面还是多页面。如果所有的文件都在一个bundle里面的话bundle体积就会非常大。所以要把bundle拆开多个小文件。

optimization:{
    splitChunks:{
    chunks:’all'
    }
}

懒加载

先进行代码分割,再把要加载的文件import的时候加上webpackChunkName 标识
预加载的标识为 webpackPrefetch:ture

import(/* webpackChunkName:’test’, webpackPrefetch:true */ ‘.test’).then(({mul}) = > {
    console.log(mul(4, 5))
})

PWA (Progressive web apps,渐进式 Web 应用)

  • Discoverable, 内容可以通过搜索引擎发现。
  • Installable, 可以出现在设备的主屏幕。
  • Linkable, 你可以简单地通过一个URL来分享它。
  • Network independent, 它可以在离线状态或者是在网速很差的情况下运行。
  • Progressive, 它在老版本的浏览器仍旧可以使用,在新版本的浏览器上可以使用全部功能。
  • Re-engageable, 无论何时有新的内容它都可以发送通知。
  • Responsive, 它在任何具有屏幕和浏览器的设备上可以正常使用——包括手机,平板电脑,笔记本,电视,冰箱,等。
  • Safe, 在你和应用之间的连接是安全的,可以阻止第三方访问你的敏感数据。
    workboxWepackPlugin

多进程打包

npm i thread-loader -D

在babel-loader外面套一个thread-loader
缺点:进程启动大概为600ms,进程开销比较大。
适用于工作消耗时间比较长的编译loader,比如编译js的babel-loader相对css就比较耗时。

externals

忽略一些包被打包进来,注意如果要使用这个库就要在html文件里面的script标签里面引用

externals:{
    jquery:’jQuery'
}

dll

和externals类似,可以将某些第三方依赖包统一打包到dll文件中。
把一些固有的库都先打包到dll文件里面。这样打包1次后面就不用每次都打包了。可以让第2次打包的过程变快。提升构建速度。