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
分享
二维码
< <上一篇
下一篇>>