一、前言
基础篇主要围绕以下几点展开：
- 为什么会使用 Webpack？
- Webpack 打包流程
- Webpack 的本源
- Webpack 的配置文件
- 简化 Webpack 打包流程
1. 简单案例
在前端开发中，如果一个页面的逻辑非常多，那么我们就有必要做业务逻辑的划分。
例如，一个网页包含三个部分，分别是：Header、Sidebar、Content，这些全都通过 JavaScript 来编写，并加入到页面中。
文件结构如下：
my-webpack-demo-1/ |- index.html |- index.js
index.html
<body> <div id="root"></div> <script src="./index.js"></script> </body>
index.js
const dom = document.getElementById('root'); // header const header = document.createElement('div'); header.innerText = 'header'; dom.appendChild(header); // sidebar const siderBar = document.createElement('div'); siderBar.innerText = 'siderBar'; dom.appendChild(siderBar); // content const content = document.createElement('div'); content.innerText = 'content'; dom.appendChild(content);
2. 面向对象
a) 封装
在上面的案例中，实际上 Header、Sidebar、Content 各自的业务逻辑如果很多的话，就可以单独封装到一个构造函数（类）中。
文件结构如下：
my-webpack-demo-1/ |- content.js |- header.js |- index.html |- index.js |- sidebar.js
header.js:
function Header(dom) { const header = document.createElement('div'); header.innerText = 'header'; dom.appendChild(header); }
sidebar.js
function Sidebar(dom) { const siderBar = document.createElement('div'); siderBar.innerText = 'siderBar'; dom.appendChild(siderBar); }
content.js
function Content(dom) { const content = document.createElement('div'); content.innerText = 'content'; dom.appendChild(content); }
b) 引入
封装完毕后，引入到 index.html 中，并在 <script src="./index.js"></script> 前导入三个 js 文件。
index.html
<body> <div id="root"></div> <script src="./header.js"></script> <script src="./sidebar.js"></script> <script src="./content.js"></script> <script src="./index.js"></script> </body>
index.js
const dom = document.getElementById('root'); // header new Header(dom); // side-bar new Sidebar(dom); // content new Content(dom);
3. 模块化
使用面向对象的方式改进了代码，但是出现了新的问题。什么问题呢？
问题往往发生在 index.html 中引入 js 的先后顺序出现错误。例如，如果先引入 index.js ，之后再引入其他 js 文件，这样顺序不对而导致解析顺序出错，那么必然报错。实际上，我们希望将所有的文件都引入到 index.js 中，然后只引入这个主文件 ( index.js ) 就好。
所以，我们不妨使用 ES6 的模块语法（Module）。
于是，我们需要对代码做一个修改：
- 通过 export 语法导出模块；
- 通过 import 语法引入模块。
a) 功能代码编写与导出
header.js
function Header(dom) { const header = document.createElement('div'); header.innerText = 'header'; dom.appendChild(header); } export default Header;
sidebar.js
function Sidebar(dom) { const siderBar = document.createElement('div'); siderBar.innerText = 'siderBar'; dom.appendChild(siderBar); } export default Sidebar;
content.js
function Content(dom) { const content = document.createElement('div'); content.innerText = 'content'; dom.appendChild(content); } export default Content;
