三年努力,五年摸鱼-webpack篇(上)

125 阅读1分钟

webpack的基础应用

32af52ff9594b121517ecdd932644da4.png

webpack基本介绍 webpack是一个现代javaScript应用程序的就静态模块打包器,他可以合并代码,还可以对代码进行翻译和压缩,让浏览器更快打开网页。

注:使用前需要下载webpack包,在对应目录小黑窗下输入npm i webpack webpack-cli -D(它只是一个开发依赖,并不是生产依赖,所以在命令行中加上-D)

前期准备:在一个js中引入另一个js

Snipaste_2022-05-02_21-03-51.png

使用webpack来做打包 命令格式是:npx webpack 文件名
如果出现以下结果说明操作成功

Snipaste_2022-05-02_20-55-59.png webpack会分析入口文件中的引用关系,把相关的文件合成在一起,变成一个.js文件

Snipaste_2022-05-02_21-04-50.png 接下来在对应的html页面引入新生成的js文件,就可以正常使用了。