背景
原始的开发，一个html对多个css，js有依赖的时候，就会在一个html文件内引入多个css，js文件，造成浏览器加载的缓慢，也不易于维护，特别是依赖不对应的时候，有些js依赖另一个js，引入顺序错误也会报错，因此需要webpack对这些文件的依赖进行一个管理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link type="text/css" rel="styleSheet" href="./1.css" /> <link type="text/css" rel="styleSheet" href="./2.css" /> <link type="text/css" rel="styleSheet" href="./3.css" /> <title>webpack学习</title> </head> <body> <div id="root"></div> <script src="./1.js"></script> <script src="./2.js"></script> <script src="./3.js"></script> </body> </html>
webpack的打包想法
当前html文件只引入当前自己需要的js,即index.html只引入index.js ，index .js需要什么依赖，就由index.js自己去引入，这样，index.html就只会请求一次静态文件，加快加载速度，也便于梳理代码与代码之间的依赖关系，也不会出现js引入顺序颠倒造成的错误，因为在使用依赖的时候，就已经做好了依赖的引入准备
webpack打包示例
编写项目代码
- 首先我们按照刚刚说的想法，index.html只引入index.js一个入口js
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 解决没有favicon.ico时报错GET http://localhost:9999/favicon.ico 404 (Not Found) --> <link rel="shortcut icon" href="#" /> <title>webpack学习</title> </head> <body> <div>这是webpack学习</div> <div id="root"></div> <script src="./index.js"></script> </body> </html>
- index.js中引入自己需要的模块
import Header from './src/components/Header/Header'; // ES Module 引入 import Content from './src/components/Content/Content'; // ES Module 引入 import SideBar from './src/components/SideBar/Sidebar'; // ES Module 引入 new Header(); new Content(); new SideBar();
- 模块Header.js
function Header() { const dom = document.getElementById('root'); const header = document.createElement('div'); header.innerText = 'Header'; dom.append(header); } export default Header; // ES Module 导出
- 模块Content.js
function Content() { const dom = document.getElementById('root'); const content = document.createElement('div'); content.innerText = 'Content'; dom.append(content); } export default Content; // ES Module 导出
- 模块Sidebar.js
function SideBar() { const dom = document.getElementById('root'); const sideBar = document.createElement('div'); sideBar.innerText = 'SideBar'; dom.append(sideBar); } export default SideBar; // ES Module 导出
- 浏览器打开index.html，发现报错了，import这样的引入方式，浏览器是无法识别的，会报错，因此就需要用到webpack这样的打包工具，它能识别模块的引入（相当于是翻译，让浏览器识别模块引入）
npm 初始化项目
在使用webpack之前，我们先需要npm 初始化项目
在项目根目录打开终端，输入npm init -y,当项目初始化完成，会在项目根目录自动生成package.json
安装webpack和webpack-cli
在项目根目录打开终端输入
npm i webpack webpack-cli -D
使用webpack打包
终端输入输入
npx webpack ./index.js
打包index.js ，会在项目目录生成dist/main.js
将生成的main.js引入到html中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 解决没有favicon.ico时报错GET http://localhost:9999/favicon.ico 404 (Not Found) --> <link rel="shortcut icon" href="#" /> <title>webpack学习</title> </head> <body> <div>这是webpack学习</div> <div id="root"></div> <script src="./dist/main.js"></script> </body> </html>
在浏览器打开index.html,浏览器已经成功识别模块引入的语法，运行成功 
这就是最简单的webpack打包案例
