webpack（三）：webpack起步

创建如下文件和文件夹：

dist文件夹：用于存放之后打包的文件
src文件：用于存放我们写的源文件

3.1commonJS模块化导出

这是基于nodejs使用的导出方式，没有nodejs的支撑是无法使用的！
module.exports= {} 导出

3.2commonJS模块化导入

require导入

3.3js文件的打包

  现在的js文件中使用了模块化的方式进行开发，他们可以直接使用吗？
  不可以。因为如果直接在index.html引入这两个js文件，浏览器并不识别其中的模块化代码。另外，在真实项目中当有许多这样的js文件时，我们一个个引用非常麻烦，并且后期非常不方便对它们进行管理。
  我们应该怎么做呢？
  使用webpack工具，对多个js文件进行打包。我们知道，webpack就是一个模块化的打包工具，所以它支持我们代码中写模块化，可以对模块化的代码进行处理。另外，如果在处理完所有模块之间的关系后，将多个js打包到一个js文件中，引入时就变得非常方便了。
首先，切换到项目的路径下

使用如下webpack的打包指令：将main.js(包含文件中导入的其他依赖文件，如下图所示）打包成bundle.js

webpack src/main.js dist/bundle.js

如图所示，打包成功

3.4使用打包后的文件

打包后会在dist文件下，生成一个bundle.js文件，bundle.js文件，是webpack处理了项目之间文件依赖后生成的一个js文件，我们只需要将这个js文件在index.html中引入即可。

打开网页，查看效果：

3.5ES6模块化的导出

3.6ES6模块化的导入

3.7重新打包

修改了文件就要重新打包使其生效

刷新网页，查看效果：

参考文档