目錄結(jié)構(gòu):
-- 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的模塊規(guī)范書寫的点骑,瀏覽器并不支持。因此即使index.html直接引入index.js的烁,代碼也是無法正常執(zhí)行的。那么webpack怎么做到的呢。
webpack一行命令就夠:
webpack ./index.js bundle.js
上面將index.js作為入口文件進(jìn)行構(gòu)建拳昌,輸出結(jié)果為bundle.js