第一种方法:
在终端写命令:

第一步:先换到项目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文件,其他目录路径下使用会报错
本文介绍了两种使用Webpack打包JavaScript项目的步骤。第一种方法涉及通过命令行直接指定输入和输出文件路径;第二种方法是通过配置webpack.config.js文件,并使用npm脚本进行打包。文中详细阐述了每一步的操作细节,包括目录结构和文件生成位置。同时,讨论了在不同目录下运行命令的影响以及如何通过package.json配置简化打包流程。

被折叠的 条评论
为什么被折叠?



