Webpack和Vite

背景

看了视频我依旧学不会。敲了些样例代码,简单的入了个门~

webpack

webpack 是代码编译工具,有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个依赖图(dependency graph),此依赖图对应映射到项目所需的每个模块,并生成一个或多个 bundle。
来源:百度百科

webpack 可以对你写的js文件进行打包, 你可以指定打包后的文件名,已经存在在哪个目录下。将众多纷杂的前端文件打包成一个体积贼小的静态资源。
听说vite超简单,但我的react项目还是用的webpack。所以webpack的学习是绕不过去了。
打包后,默认生成一个dist文件。你也可以给它改名为build

build文件夹下都是什么呢?
css.
css.map
static文件夹
一些图片
chunk.js
main.js

此处应该有个截图

webpack的难点是它有很多的插件,需要根据资源类型的不同,使用不同的加载器。

webpack是如何分析模块间的依赖关系的呢?

webpack.config.js

webpack常见plugin

WebPack 是一个模块打包工具,你可以使用WebPack管理你的模块依赖,并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、JavaScript、CSS以及各种静态文件(图片、字体等),让开发过程更加高效。对于不同类型的资源,webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系,最后 生成了优化且合并后的静态资源。
webpack的两大特色:
1)code splitting(可以自动完成)
2)loader 可以处理各种类型的静态文件,并且支持串联操作
webpack 是以commonJS的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面,方便旧项目进行代
码迁移。
webpack具有requireJs和browserify的功能,但仍有很多自己的新特性:
1) 对 CommonJS 、 AMD、ES6的语法做了兼容
2)对js、css、图片等资源文件都支持打包
3) 串联式模块加载器以及插件机制,让其具有更好的灵活性和扩展性,例如提供对CoffeeScript、ES6
的支持
4) 有独立的配置文件webpack.config.js
5) 可以将代码切割成不同的chunk,实现按需加载,降低了初始化时间
6)支持 SourceUrls 和SourceMaps,易于调试
7) 具有强大的Plugin接口,大多是内部插件,使用起来比较灵活
8)webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快

webpack和vite的区别,对比如下:(待补充)
插入一个自己写的表吧

你可能感兴趣的:(webpack,前端)