上一节中，我们已经安装好了 webpack ，本节我们来学习 何使用 webpack 进行文件打包。
使用webpack打包文件
要打包文件，首先我们需要初始化一个项目，前面我们已经创建好了一个 xkd_webpack 的项目，并且这个项目根目录下已经有了一个 package.json 文件、package-lock.json 文件和一个 node_modules 文件夹，如下所示： 在实际项目中，为了方便管理许多文件，我们可能需要创建一个 src 文件夹存放入口文件等开发文件，然后创建一个 dist 文件夹存放最终打包的文件，还有其他类型的文件，为了方便管理我们也会放在同一个目录下。
但是因为我们这里只是举例说一下如何使用 webpack 打包文件，所以我们直接项目根目录下，创建一个静态页面 index.html 和一个 JS 的入口文件 index.js 文件，文件名称是我们自定义的，如果你想使用其他的名称也是可以的。
下面是 index.html 文件的内容：
<html>
<head>
<meta charset="utf-8">
<title>webpack入门</title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
在这个 HTML 文件中我们引入了一个 bundle.js 文件，这个 bundle.js 文件就是最终的打包后的文件，但是现在还没有生成哟，要等我们执行完打包命令后才会生成这个文件。
然后入口文件 index.js 的内容如下所示：
document.write('你好，侠课岛！');
最后执行下列命令，就可以成功将 index.js 文件打包到 bundle.js文件中：
webpack index.js -o bundle.js
执行命令效果如下所示：
命令执行成功后，项目根目录下会生成一个 bundle.js 文件。这个文件的作用就是用了一个立即执行函数，然后将 index.js 的内容封装成一个函数，作为参数传进内部执行，这样就完成了文件的打包：
此时我们在浏览器中打开 index.html 文件，页面将会显示 "你好，侠课岛！"，这同时也能证明 index.js 文件成功打包到了 bundle.js 文件中，因为我们只在 index.html 文件中引入了 bundle.js 文件。
打包多个文件
当然我们在项目中肯定不只有一个 .js 文件，那么如果我们除了 index.js 文件还有其他的 .js 文件，要如何做呢。
示例：
例如项目中还有一个 module.js 文件，内容如下所示：
module.exports = '侠课岛欢迎你！'
这样我们可以修改入口文件 index.js，将创建好的 module.js 模块引入到入口文件中：
document.write('你好，侠课岛！')
document.write(require('./module.js')) // 引入模块
再次执行 webpack index.js -o bundle.js ，会重新打包文件。
在页面启动时，会先执行 index.js 文件中的代码，其它文件中的代码会在执行到 require 语句的时候再执行。 此时刷新浏览器，我们可以看到浏览器中的显示内容发现了改变，显示内容变为 "你好，侠课岛！侠课岛欢迎你！"。
webpack 会分析入口文件，解析包含依赖关系的各个文件，这些文件都打包到 bundle.js 中。webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。
总结
在旧版本的 webpack 中，我们是使用 webpack index.js bundle.js 命令来执行打包操作，而新的 webpack4.0+ 版本打包文件时要在命令中加一个 -o ，否则会报错。