目录结构:
-- index.html
-- index.js
-- hello.js
hello模块:
module.exports = 'Hello world!';
index模块:
var text = require('./hello');
console.log(text);
index.html页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>
index.html中引用的bundle.js并不存在,它将由webpack生成。
上面的代码按照CommonJS的模块规范书写的,浏览器并不支持。因此即使index.html直接引入index.js,代码也是无法正常执行的。那么webpack怎么做到的呢。
webpack一行命令就够:
webpack ./index.js bundle.js
上面将index.js作为入口文件进行构建,输出结果为bundle.js