安装 http-server
1 | npm i http-server |
一、 入口
首先创建一个静态页面index.html和一个JavaScript入口文件main.js
index.html1
2
3
4
5
6
7
8
9<html>
<head>
<meta charset="utf-8">
<script src="app.js"></script>
</head>
<body>
</body>
</html>
main.js
1 | document.write('这里是入口<br/><br/>'); |
然后编译main.js.js并打包到app.js
1 | $ webpack main.js app.js |
打包过程会显示日志:
让我们在浏览器show一把
1 | $ http-server |
用浏览器打开 index.html 将会看到 ‘这里是入口’
二、 加载模块
接下来,我们添加一个模块 module.js 并修改入口 main.js:
1 | // module.js |
1 | // main.js |
重新打包 webpack main.js app.js 清除缓存后刷新页面.
打包过程显示的日志:
Webpack 会分析入口文件,解析包含依赖关系的各个文件。这些文件(模块)都打包到 app.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时,会先执行 main.js 中的代码,其它模块会在运行 require 的时候再执行。
本实例源码