entry

指定打包入口
image.png

从entry入口文件， 找到依赖的文件 图片， 形成一颗依赖树

单入口 对应单页面， 多入口对应多页面应用
image.png

outPut

指定打包输出到磁盘

单入口
image.png

多入口输出， 利用占位符name

image.png
这样就会生成 app.js 和 search.js

loaders

webpack开箱只支持 js, json类型文件， 像图片 jsx vue 都需要loaders转换成 webpack支持的文件， 才能加到依赖图里面

loadders是一个函数， 参数是源文件， 返回转换结果

比较常用的loaders 有

image.png

loaders用法

image.png

plugins

插件作用在于bundle的优化， 作用在整个构建过程

常用的plugin

image.png

使用

image.png

Mode

指定当前的构建环境， production development none

默认是 production , 会开启适合在生产环境的一些参数， 比如不输出console

会开启对应的插件

image.png

解析es6 jsx

使用babel-loader 解析es6还要 在.babelrc 文件 配置 preset

image.png
image.png
-D 是 —save-dev的简称

@babel/preset-env 是转换es6的语法

image.png
如果需要 jsx的转换， 在添加 @babel/preset-react

image.png

解析css

css-loader 是用来把.css 文件转换成commonjs规范的文件

style-loader 将样式通style标签，把样式放到 head 中， 这样样式在能作用到htm

image.png

注意顺序，loader 调用顺序是从右边到左边链式调用的

解析less

image.png

解析图片

image.png
image.png

解析字体文件

image.png

image.png

url-loader, 其实也内置了 file-loader, 但它可以把图片转换成base64

image.png

如果小于10k , 使用base64

webpack对文件的监听

文件修改后，自动重新编译，打包

image.png

image.png
这种方式需要手动刷新浏览器

监听原理

轮询 文件最后编辑的时间

image.png

热更新

自动刷新浏览器

image.png

打包好的是放在内存， 所以打包速度更快

—opon 自动开启浏览器

image.png

contentBase 监听范围

另一种方式

image.png

原理

image.png

开始 1 2 a b 文件有变化 1 2 3 4

HMR Server 是服务端，用来将变化的 js 模块通过 websocket 的消息通知给浏览器端。

HMR Runtime是浏览器端，用于接受 HMR Server 传递的模块数据，浏览器端可以看到 .hot-update.json 的文件过来。

HotModuleReplacementPlugin是做什么用的？

webpack 构建出来的 bundle.js 本身是不具备热更新的能力的，HotModuleReplacementPlugin 的作用就是将 HMR runtime 注入到 bundle.js，使得bundle.js可以和HMR server建立websocket的通信连接

文件指纹 缓存 策略

index_24afb3.js

24afb3 这个就是文件指纹， 可以做版本管理， 如果没有变动的文件可以读取缓存数据

image.png

contenthash , 修改了js不会影响css的hash, 一般css文件采用contenthash

image.pngjs使用 chunkhash

image.png

css 使用 contenthash, 利用MiniCssExtractPlugin, 把 style-css 的结果提取出来一个独立的文件， 而不是直接放到head中

image.png

图片的hash 也是指contentHash 没想到吧

image.png

指定配置文件

image.png

image.png

这里去掉了styleloader

js文件压缩

因为内置了 uglifyjs-webpack-plugin 所以会默认压缩js

css压缩

wp3

image.png

html压缩

image.png