VSCode webpack 5.72.0打包

第一种方法：

在终端写命令:

第一步：先换到项目src的地址

cd D:\vue\WebPack\01-webpack的起步\src

第二步： 输入

webpack D:\vue\WebPack\01-webpack的起步\src\main.js -o D:\vue\WebPack\01-webpack的起步\dist\bundle.js

打包后的项目目录

需要打包的文件地址和输出打包文件的地址都用本地路径

输出打包文件的地址用相对路径时也可以

第三步：在html文件中引入输出打包文件的相对路径（本地路径报错）

运行成功！！

---------------------------------------------------------------------------------------------------------------------------------

第二种方法：

配置文件webpack.config.js文件

第一步：先换到项目src地址

cd D:\vue\WebPack\01-webpack的起步1\src

第二步：初始化

输入

npm init

 这个过程会生成package.json文件

第三步：换到项目地址：cd D:\vue\WebPack\01-webpack的起步1

这里如果不换的话会在src下生成dist文件再在dist文件下生成bundle.js文件，换了之后会在项目目录下（也就是说生成的dist与src同级）生成dist文件再在dist文件生成main.js文件

然后再输入

webpack

 最终项目目录：

但是老师直接在项目目录下npm init和webpack下得到的结果是（ws）

如果在package.json文件加上 "build":"webpack"

 可以在src路径下使用 

npm run build

同时src目录下生成dist文件，dist文件下生成bundle.js文件，其他目录路径下使用会报错