美文网首页
Hello world

Hello world

作者: 珍珠林 | 来源:发表于2017-05-11 00:03 被阅读0次

目录结构:
-- 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

相关文章

网友评论

      本文标题:Hello world

      本文链接:https://www.haomeiwen.com/subject/ghcntxtx.html