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资源