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