Webpack 入门三：入口与模块

一、安装 http-server

http-server 是一个简单的零配置命令行 http 服务器。

$ npm i http-server

一、Webpack 入口

首先创建一个静态页面 index.html 和一个 JavaScript 入口文件 main.js

index.html

<html>
<head>
  <meta charset="utf-8">
  <script src="app.js"></script>
</head>
<body>

</body>
</html>

main.js

document.write('这里是入口<br/><br/>');

然后编译 main.js 并打包到 app.js

$ webpack main.js app.js

打包过程会显示日志：

让我们在浏览器 show 一把

$ http-server

用浏览器打开 index.html 将会看到 '这里是入口'

三、加载模块

接下来，我们新增一个模块 module.js 并修改入口文件 main.js：

新增 module.js

module.exports = '这里是模块'

修改 main.js

document.write('这里是入口<br/><br/>');
document.write(require('./module.js')) // 添加模块

重新打包 webpack main.js app.js 清除缓存后刷新页面.

打包过程显示的日志：

Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 app.js。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 main.js 中的代码，其它模块会在运行 require 的时候再执行。

本实例源码

felix-cao / Blog

Webpack 入门三：入口与模块 #35

一、安装 http-server

一、Webpack 入口

三、加载模块

felix-cao / Blog

Webpack 入门三：入口与模块 #35

一、安装 http-server

一、Webpack 入口

三、 加载模块

三、加载模块