Webpack

37 阅读1分钟

webpack是一个静态资源打包工具

它会以一个或者多个晚间作为打包入口,将我们整个项目所有文件编译组合成一个或者多个文件输出出去,输出的文件就是编译好的文件,就可以在浏览器端运行了

webpack本身只能处理js资源

webpack5大核心概念 1.entry(入口)用相对路径 指示webpack从哪个文件开始打包 2.output(输出)用绝对路径 指示webpack打包完的文件输出到那里去,如何命名等 3.loader(加载器) webpack本身只能处理js、json等资源,其他资源需要借助loadermwebpack 才能解析 4.pligins(插件) 扩展Webpack的功能 5.mode(模式) 开发模式(development) 生产模式(production)

处理样式资源 要想webpack打包资源,必须引入该资源 style-loader css-loader lese-loader

处理图片资源 file-loader url-loader(webpack5已经将两个loader功能内知道webpack里了,只需要简单配置即可处理图片资源 图片转base64 优点:减少请求数量 缺点:体积会变大

修改输出文件目录

自动清空上次打包结果 在output中加入clean:true

处理字体图片资源

处理其他资源

处理js资源 原因是webpack对js处理是有限的,只能编译js中ES模块化语法,不能编译其他语法

Babel 主要用于将ES6语法编写的代码转换为向后兼容的Javascript语法

处理html资源