webpack打包工具的搭建

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

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

webpack打包工具的搭建

  • 第一步
    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”);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值