Webpack有哪些核心?分别都代表了什么？

发布网友 发布时间：2022-04-20 04:42

我来回答

共1个回答

热心网友 时间：2023-07-17 02:23

一、webpack简介

1.1 版本更迭

image.png

大版本变化

image.png

1.2 功能进化

Webpack V1

Webpack V2

Webpack V3

V1 -> V2

迁移指南 https://doc.webpack-china.org/guides/migrating/

V2 -> V3

更新升级即可

二、webpack核心概念

2.1 Entry

2.2 Output

2.3 Loaders

2.3.1 常用Loader

编译相关

样式相关

文件相关

2.4 Plugins

2.4.1 常用plugins

优化相关

功能相关

2.5 名词

三、初探 webpack

3.1 使用babel打包es6

3.1.1 编译 ES 6/7

Babel

Babel Presets

Babel Polyfill

Babel Runtime Transform

例子

3.2 打包 Typescript

配置

tsconfig

Typings

例子

3.3 提取 js 的公用代码

例子

image.png

3.4 代码分割和懒加载

第一种方式：通过wepack内置方法

第二种方式：通过ES2015 Loader Spec

import()方式返回一个promise在import中传入需要依赖的明，动态加载模块，就可以像使用Promise一样使用import().then()

代码分割场景

例子

运行打包这时loadash提取到vendor中

image.png

这时候还不是我们想要的

image.png

image.png

image.png

import()动态加载的写法

合并了subPageA和subPageB

image.png

来看看打包后的文件，既有A、B

image.png

在webpack代码分割中使用async异步加载

image.png

image.png

3.5 处理 CSS 和 CSS 模块化

引入css

Style-Loader

Style-Loader的options

例子

CSS-Loader

options

CSS-Moles

例子

配置Less / Sass

例子

提取 CSS

例子

image.png

3.6 PostCSS in Webpack

安装

例子

3.7 Tree shaking

3.7.1 JS Tree shaking

使用场景

例子

3.7.2 CSS Tree shaking

例子

四、由浅入深Webpack

4.1 文件处理

4.1.1 图片处理

4.1.2 处理雪碧图、base64、压缩图片

4.1.2 处理字体文件

4.1.3 处理第三方 JS 库

1.providePlugin

以引入jQuery为例

引入本地libs中的jQuery

2.imports-loader

4.2 HTML in webpack(自动生成HTML)

4.2.1 生成 HTML

options

4.2.2 HTML 中引入图片