b) 功能代码引入到主文件
导出后，将所有的功能代码统一在 index.js 中引入：
// index.js // ES Module import Header from './components/header.js'; import Sidebar from './components/sidebar.js'; import Content from './components/content.js'; const dom = document.getElementById('root'); // header new Header(dom); // side-bar new Sidebar(dom); // content new Content(dom);
而 index.html 中只引入 index.js：
<body> <div id="root"></div> <script src="./index.js"></script> </body>
然而，浏览器暂不支持模块语法，会报错。
于是，Webpack 就应运而生了~
二、初识 Webpack
1. 介绍
a) webpack
Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
- 打包 ES Modules，CommonJS 以及 AMD Modules（甚至是组合）。
- 可以在运行时对异步加载的单文件或多个块进行打包（减少初始加载时间）。
- 在编译期间解析依赖项，从而减少运行时大小。
- 加载器（Loaders） 可以在编译时对文件进行预处理。比如，TypeScript to JavaScript, Handlebars strings to compiled functions, images to Base64, etc.
- 高度模块化的 插件（Plugin） 系统。（Highly modular plugin system）
b) webpack-cli
webpack 官方的 CLI (Command Line Interface) 工具。
webpack CLI provides a flexible set of commands for developers to increase speed when setting up a custom webpack project. As of webpack v4, webpack is not expecting a configuration file, but often developers want to create a more custom webpack configuration based on their use-cases and needs. webpack CLI addresses these needs by providing a set of tools to improve the setup of custom webpack configuration.
2. 安装
mkdir webpack-demo cd webpack-demo npm init -y npm i webpack webpack-cli --save-dev
webpack 和 webpack-cli 是两个不同的包，--save-dev 可以简写为 -D，表示保存并写进开发依赖中。
注意：webpack-cli 必须安装，否则运行不了 webpack！
查看版本：
npx webpack -v
npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去 PATH 里找。如果依然找不到，就会帮你安装！
3. 文件结构
将文件按照如下位置安放：
webpack/ |- /src |- /components |- content.js |- header.js |- sidebar.js |- index.js |- index.html |- package.json
4. 打包
执行打包命令：
npx webpack-cli
运行结果如下：
打包完成后，就会出现一个 dist 目录，里面有一个 main.js 文件，这就是打包完成的 js 文件。
或者通过：npx webpack 也可以。
5. 效果
在打包结束后，需要修改 index.html 中脚本的引用位置：
<body> <div id="root"></div> <script src="./dist/main.js"></script> </body>
页面效果如下：
网页正常显示。
那么， webpack 做了什么事情？它将原来的文件翻译打包成了浏览器看得懂的 js 文件 ( main.js )。
6. 本源
在某种程度上，我们可以将 webpack 理解为 js 代码翻译器吗？其实不然！
它只是可以识别 js 的模块语法而已，例如，上面的 import、export 语法 ( Header、Sidebar、Content 就是模块。)，然而对于其他的 js 语法它是不认识的！
正如它的官方文档所说，Webpack is a module bundler. webpack 是一个模块打包工具！它可以将多个模块打包到一起。另外，对于 CommonJS（Node.js 用）、CMD、AMD 这些模块规范，webpack 也可以识别并打包。
除了 js 文件以外，webpack 还可以打包其他模块文件，例如， ts 文件，css/sass/less/stylus 文件，图片文件等等。
阅读参考：
三、Webpack 配置文件
在第二部分中，我们通过 npx webpack 的形式进行打包，实际上我们用的是 webpack 默认的配置来打包的。
那么如何自定义打包配置呢？
- 在根目录下创建配置文件 ( 默认是：webpack.coonfig.js )
- 编写打包配置项
注意，此时的文件结构如下：
webpack/ |- /src |- /components |- content.js |- header.js |- sidebar.js |- index.js |- index.html |- package.json
