webpack打包工具的搭建

最新推荐文章于 2025-05-16 17:53:36 发布

杨园园的微博

最新推荐文章于 2025-05-16 17:53:36 发布

阅读量405

点赞数 1

CC 4.0 BY-SA版权

分类专栏： webpack工具

本文链接：https://blog.youkuaiyun.com/rosy_yang/article/details/78674483

4 篇文章

订阅专栏

本文详细介绍了使用Webpack进行项目打包的七个步骤，包括全局安装Webpack、初始化项目、配置入口文件等，适合初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步
cmd中执行命令npm install -g webpack (安装全局webpack)
第二步
自己手动创建文件夹如名为pack，将cmd的执行命令放到改文件目录下，如F: ，cd …/../../../
第三步
执行命令 npm init 执行完成后pack文件下会多出文件package.json 文件
第四步
自己手动创建index.html ，app.js 前面在执行命令的时候已经设置了app.js为入口文件， index.html中引入bundle.js的链接
第五步
执行命令 webpack app.js bundle.js ，意思是将app.js内容打包到bundle.js中，bundle.js是命令自动生成的文件。
第六步
js的暴露，module.exports=XXX; 在入口文件中的引用该js的写法是require(“./xxxx.js”) 自己创建的文件一般格式都是./
第七步
jquery的引用，执行命令 npm install jquery 执行完后项目目录下会自动生成node_modules下面包含jquery文件，引用的时候js文件写入 var $=require(“jquery”);