上QQ阅读APP看书，第一时间看更新
1.4.1 Hello World
首先，我们在工程目录下添加以下几个文件。
index.js：
import addContent from './add-content.js';
document.write('My first Webpack app.<br />');
addContent();
add-content.js：
export default function() {
document.write('Hello world!');
}
index.html：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>My first Webpack app.</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
然后在控制台输入打包命令：
npx webpack --entry=./index.js --output-filename=bundle.js --mode=development
用浏览器打开index.html，这时应该可以看到在页面上会显示“My first Webpack app.Hello world！”，如图1-1所示。
图1-1 index.html输出结果
刚刚Webpack帮我们完成了一项最基本的模块组装工作，现在让我们回顾一下刚刚输入的指令。
命令行的第1个参数entry是资源打包的入口。Webpack从这里开始进行模块依赖的查找，得到项目中包含index.js和add-content.js两个模块，并通过它们来生成最终产物。
命令行的第2个参数output-filename是输出资源名。你会发现打包完成后工程中出现了一个dist目录，其中包含的bundle.js就是Webpack的打包结果。
最后的参数mode指的是打包模式。Webpack为开发者提供了development、production、none三种模式。当置于development和production模式下时，它会自动添加适合于当前模式的一系列配置，减少了人为的工作量。在开发环境下，一般设置为development模式就可以了。
为了验证打包结果，可以用浏览器打开index.html。项目中的index.js和content.js现在已经成为了budnle.js，被页面加载和执行，并输出了各自的内容。