它是一个打包工具,可以把多个静态资源文件打包成一个文件。
第一步安装webpack打包工具:
我们先用vscode打开空文件夹,然后保存工作区,打开工作区。新建一个文件夹,然后初始化。
然后我们去下载webpack:
然后如果下载完了我们可以查看版本号:
如果下载成功了,但是查看不了版本号需要修改下面的配置:
第二步创建js文件用于打包操作:
我们再创建一个js文件:
我们再创建一个文件然后引入这两个文件:
第三步创建webpack配置文件,配置打包信息:
第四步 使用命令执行打包
webpack 有黄色警告
webpack --mode=development 没有黄色警告
会出现警告。
现在我们使用第二种:
没有警告了。
最终测试:
创建html文件,引入打包之后js文件,使用浏览器查看效果。
我们也可以打包css:
第一步创建css文件,用于样式:
第二步在main.js中引入css:
第三步 安装css加载工具:
第四步修改webpack文件:
我们删除之前dist里面的文件,重新打包一下:
我们再来去启动我们的html文件:
使用webpack打包工具,我们可以将多个js,css文件一起打包。