Hello world

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 周末呆了两天星巴克,通读了一遍react以及部分npm,webpack的文档,终于可以给一些像我一样被前端杂乱的工...
    MMoooooon阅读 6,416评论 2 2
  • webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert阅读 11,543评论 2 71
  • 0. 前言 因为公司最近要做一个新的项目,最近都在学习react技术,想在学习一些新的技术的同时,想把自己的理解给...
    旧丶时候阅读 6,481评论 5 13
  • 今天研修班听刘海生老师的课,收获颇多,做下记录,作为教学反思模式的起点。 1、我们的大学涌现出很多假课、假老师、假...
    青椒丝儿阅读 1,664评论 0 1
  • 《元氏方言志》系统描写当代河北元氏居民的口语语言系统,对元氏方言中的尖团音、入声、儿化韵做了审核,形成了《元氏方言...
    波塞阅读 6,798评论 0 0