webpack概念及安装

梓旭 • • webpack

概念


webpack 是一个用于 JavaScript 应用程序的 静态模块打包工具。
webpack官方中文文档：https://webpack.docschina.org/

为什么需要打包工具？

  • 随着前端的发展，产生了一系列的开放框架，如（Vue、React）和第三方语言，如（Less/Sass/TypeScript等）。这样的代码在浏览器上无法直接运行，必须要先经过编译后才能变成浏览器识别的语法。
  • 所以我们需要打包工具才能完成这些事情。
  • 另外，打包工具还具备代码压缩，兼容处理，提升性能等优势。

有哪些打包工具？

  • Grunt
  • Gulp
  • Webpack
  • Rollup
  • Vite
  • ...

目前webpack属于比较主流和热门的打包工具，功能很强大，而且配置更全面，所以我们今天优先学习该工具。

Webpack的基本功能

  • 他能够以一个或多个文件作为打包入口，将我们整个项目的所有文件编译组合成一个或者多个文件，并且输出出来。
  • 输出的文件，就是我们网页可以直接引入并使用的文件
  • 我们将webpack 输出的文件叫做 bundle。

编译模式

开发模式：仅能编辑JS中的 JS Module 语法
生产模式：能编译JS中的JS Module语法，还能压缩JS代码

快速使用

1、创建基础项目

2、下载依赖文件

  • 打开终端，初始化项目

[precode]npm init -y[/precode]

  • 安装依赖文件

[precode]npm i webpack webpack-cli -D[/precode]

执行命令，安装两个开发依赖模块

  • 查看依赖是否安装成功
  • npx 用于执行非全局安装的局部命令

[precode]npx webpack -v[/precode]

3、执行webpack打包命令

  • 开发模式

[precode]npx webpack ./src/main.js --mode=development[/precode]

  • 生产模式

[precode]npx webpack ./src/main.js --mode=production[/precode]

生产模式代码会被压缩

4、总结

  • webpack打包后，编译过的文件默认存在dist目录下。
  • 该代码通过浏览器可以直接运行。
梓旭梓旭
THE END
分享
二维码
< <上一篇
下一篇>>