webpack学习笔记——打包js

本文介绍如何使用Webpack进行基本的JavaScript模块打包。通过创建入口文件、引入模块及编译打包等步骤,详细展示了Webpack的工作原理。

1.新建一个入口js文件,如entry.js,代码如下:

document.write("It works.")

2.然后编译 entry.js 并打包到 bundle.js(会自动生成),在cmd中找到当前entry.js目录下,执行如下命令:

webpack entry.js bundle.js

用浏览器打开 html页面 将会看到 It works.

 3.接下来增加一个模块module.js,需要修改入口

document.write('It works.');
document.write(require('./module.js'));//添加模块

4.再次编译entry.js并打包到bundle.js

webpack entry.js bundle.js

Webpack 会分析入口文件,解析包含依赖关系的各个文件。这些文件(模块)都打包到 bundle.js 。

Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。

在页面启动时,会先执行 entry.js 中的代码,其它模块会在运行 require 的时候再执行。

转载于:https://www.cnblogs.com/yueliangcl/p/6594900.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值