共计 1560 个字符，预计需要花费 4 分钟才能阅读完成。
上一节中，咱们曾经装置好了 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，否则会报错。
链接：https://www.9xkd.com/
