携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情
Webpack 安装好了以后，我们就可以在项目中运行 Webpack，不过在运行之前，我们需要修改一下之前的代码。
在 hello.js 中使用 ES6 Module 把 hello 当做模块进行导出，使用 export default 进行导出 hello。在 index.js 中通过模块导入方法导入 hello，使用 import 关键字进行导入。
//hello.js
export default hello
//index.js
import hello from "./hello";
接下来我们想通过 Webpack 进行打包，在 VS Code 终端直接执行 webpack 命令。
可以看到生成一个 main.js 文件，同时警告提示：'mode' option has not been set，这个在后面的课程中进行介绍。
可以看到在我们项目的根目录下生成一个 dist 文件夹，打包生成的 main.js 文件存放在该目录下。可见我们执行 webpack 命令默认情况下，会帮助我们完成一些打包，这个 main.js 就是它默认打包出来的。
main.js 文件究竟是通过读取哪些文件来打个包呢？通过执行 webpack --stats detailed 命名。
我们看到这里边有特别详细的打包的信息，从这里边我们看到当前 dist 文件中 main.js 文件是从 src 打包出来的，src 文件夹下的 index.js 正好它默认的打包的入口文件。
Webpack 会帮助我们做代码的分析，最后帮我们打包了一句。
// main.js
(()=>{"use strict";console.log("Hello React！")})();
这里我们在讨论一个话题，目前我们使用 webpack 命令用的就是我们刚才在我们项目根目录下面安装 webpack 命令吗？其实不是。它使用的是我们全局安装 Webpack 的命令。
为了验证我们的结论，通过 npm uninstall webpack webpack-cli --global 命令卸载全局安装的 Webpack。
在使用命令 webpack 打包项目。
当我们卸载全局 Webpack 之后，在使用 webpack 命令，会抛出以上错误信息。
那我们现在得使用本地安装 Webpack 打包工具，这里需要借助 npx 打包工具，npx 是依托于 npm 工具，npx 工具不需要额外安装，只需安装 npm 工具，npx 工具就可在直接使用。
通过执行 npx webpack 命令，可以看到我们打包的工作正常运行。
同时，我们发现 main.js 文件好像很简单，它直接默认打包了 index.js 文件中 hello 模块，那么我们能不能自已修改我们的入口文件的路径和文件名呢？答案是肯定可以的。
