webpack学习笔记

它是一个打包工具，可以把多个静态资源文件打包成一个文件。

第一步安装webpack打包工具：

我们先用vscode打开空文件夹，然后保存工作区，打开工作区。新建一个文件夹，然后初始化。

然后我们去下载webpack:

然后如果下载完了我们可以查看版本号：

 如果下载成功了，但是查看不了版本号需要修改下面的配置：

 第二步创建js文件用于打包操作：

我们再创建一个js文件：

我们再创建一个文件然后引入这两个文件：

第三步创建webpack配置文件，配置打包信息：

第四步 使用命令执行打包

webpack 有黄色警告

webpack --mode=development 没有黄色警告

 会出现警告。

现在我们使用第二种：

 

没有警告了。

最终测试：

创建html文件，引入打包之后js文件，使用浏览器查看效果。

 

我们也可以打包css:

第一步创建css文件，用于样式：

第二步在main.js中引入css:

 

第三步 安装css加载工具：

 

第四步修改webpack文件：

 

我们删除之前dist里面的文件，重新打包一下：

 

我们再来去启动我们的html文件：

 

使用webpack打包工具，我们可以将多个js,css文件一起打包。