webpack原理

20 阅读1分钟

loader执行顺序从右到左,从下到上

1.同步loader

同步loader不能执行异步loader

image.png

2.异步loader

先执行异步的test2再执行test1

image.png

一、webpack-dev-serve是开发是实时编译更新

image.png

二、webpack处理样式

webpack默认不能对css进行打包,要使用css loader,style-loader将css文件插入到html,css-loader处理css文件之间的引用关系,postcss-loader是对不同浏览器的兼容,sass-loader是对.scss进行css转换

image.png

三、webpack处理图片

webpack是处理不了图片模块,

开发环境,file-loader将图片转换为dist目录里面

image.png

生产环境,将小图片转换为base64减少http请求,大图片不需要,防止渲染太慢

image.png

四、多入口

给不同的页面插入不同name的js文件 image.png

image.png

五、抽离css

在生产环境下,插入到html的css这种是不可取的,webpack引入以下插件进行压缩打包css和js image.png

image.png

六、抽离公共代码 第三方库的代码不会变,应该抽离成一个文件,不要合并到其他文件里面,公共模块抽离成一个文件

image.png image.png

image.png