Webpack5学习笔记--(一)

112 阅读1分钟

1.什么是webpack?为什么使用它?

  • webpack是一个打包工具。
  • 使用它将代码压缩、合并以及其他的优化。
  • 前端三大框架的脚手架都是基于webpack来打包。

打包 静态的 模块化 现代

2.安装webpack和webpack-cli

// 安装命令
npm install webpack -g
npm install webpack-cli -g
  1. 执行webpack命令,实际上是执行node_modules下面.bin目录下的webpack;
  2. webpack执行时是依赖于webpack-cli的,如果没有安装会报错;
  3. 执行webpack-cli才是真正的编译打包的过程;
  4. 第三方的脚手架没有webpack-cli,是有自己的东西(具体是啥我也还不知道!)

3.webpack打包命令

image.png

这种模块化的浏览器不能直接识别,需要借助webpack打包。

image.png

打包后的文件是可以被浏览器直接识别的!

image.png