webpack是什么?
为了引出话题，这里比如我需要动态创建页面的header，side，main，并将他们添加到页面中显示出来
传统的面向过程的开发方式:
//html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>这是最原始的网页开发</title>
</head>
<body>
<p>这是网页的内容</p>
<div id="root"></div>
<script src="./demo.js"></script>
</body>
</html>
//demo.js
demo.js文件得内容
var dom = document.getElementById('root');
// dom.append('<h2>我是动态添加的内容</h2>') //这时页面上的内容是：<h2>我是动态添加的内容</h2> 被转义后的标签
// 动态创建一个h2元素
var header = document.createElement('h2');
header.innerHTML = 'header';
document.body.appendChild(header)
var side = document.createElement('h2');
side.innerHTML = 'side';
document.body.appendChild(side)
var main = document.createElement('h2');
main.innerHTML = 'main';
document.body.appendChild(main)
面向过程的方式编码
缺点:所有的逻辑都队在一个文件里，这个文件最终会越来越大，越来越不好维护
面向对象的开发方式:
//header.js
function Header() {
// 动态创建一个h2元素
var header = document.createElement('h2');
header.innerHTML = 'header';
document.body.appendChild(header)
}
//main.js
function Main() {
var main = document.createElement('h2');
main.innerHTML = 'main';
document.body.appendChild(main)
}
//side.js
function Side() {
var side = document.createElement('h2');
side.innerHTML = 'side';
document.body.appendChild(side)
}
//index.js
new Header();
new Main();
new Side()
写完之后再在demo.html中将各个文件引入即可:
<script src="./js/header.js"></script>
<script src="./js/main.js"></script>
<script src="./js/side.js"></script>
<script src="./js/\index.js"></script>
让每个页面各司其职，只负责自己的那套逻辑，方便维护.
但是这也带来了新的问题，比如我们在demo.html中通过script引入了多个js文件，这会使网页的加载速度变慢，以前只需要加载一个js文件，而现在需要加载4个，这会使页面多出3个http请求页面的加载速度就会变慢；而且从index.js中看不出文件的位置关系；代码也还是不容易维护，各个js依赖文件有顺序要求，如果写错，会导致后面的代码无法继续执行，而且查错也是比较困难的.
为了解决这一系列问题，有人想出了新的做法:
demo.html只引入入口文件，也就是index.js,在index.js中再引入各个以来的文件，如下所示:
//index.js
import Header from './header.js'
import Side from './side.js'
import Main from './main.js'
new Header();
new Main();
new Side()
这样做的优点:
(1) demo.html中只引入了一个js文件， 页面的加载速度会很快
(2) 文件和文件之间的依赖关系非常的明确
(3) 在文件的顶部引入了各个依赖的模块， 不存在依赖文件顺序颠倒的错误的问题
但是这样做是有问题的，因为浏览器压根就不认识import语句，这个时候我们的主角webpack就登场了，webpack会告诉浏览器这是在引入一个模块，经过webpack的翻译，浏览器就可以正确的识别并且运行我们的代码了.
webpack的使用步骤：
1.初始化项目配置文件
npm init
这个命令执行完后会在我们目录下生成一个package.json的项目配置文件
2.安装webpack webpack-cli
webpack是基于nodejs开发的模块打包工具，它本质上使用node实现的，所以在安装webpack之前，首先的安装nodejs，这里建议安装稳定版本的node即可
npm install webpack webapck-cli --save-dev
安装好webpack之后，我们只需要在终端中运行npx webpack ./js/index.js
npx webpack index.js:这个命令的意思是用webpack去翻译当前目录下的index.js文件
执行完这个命令后会在我们的根目录也就是(01初始webpack)下生成一个dist文件夹，里面有个main.js的文件，这就是webpack帮我们翻译好的文件，在我们的demo.html中引入这个main.js文件，打开网页打开控制台，这时候控制台会报一个错如下:
error.png
这是什么原因造成的呢？事实上
webpack在做翻译的时候，它发现在index.js中通过ES Module模块的导入方式引入了3个文件，这里使用的是ES Module模块的导入方式，这时候webpack就要求我们导出的文件使用的是ES Module模块的导出方式导出的文件，而很明显，我们之前并没有这么做，所以我们需要修改之前的代码：
//header.js
function Header() {
// 动态创建一个h2元素
var header = document.createElement('h2');
header.innerHTML = 'header';
document.body.appendChild(header)
}
export default Header
其他两个文件也需要这样修改，修改完成之后，再次运行刚才的npx webpack ./js/index.js命令，打开网页，这时候内容就可以正确的显示在页面上了，如图所示:
eg.png
webpack究竟是什么？
webpack的核心定义是一个模块打包工具。
上面的header,main,side都可以被看成一个一个的模块，webpack可以将我们引入的这些模块打包到一起，生成最终的js文件，所以可以说webpack是一个模块打包工具，我们上面所使用的import是ES Module的导入模块的方式，实际上还有Commonjs,CMD,AMD等规范，同样webpack也可以对这些规范所引入的模块进行翻译，举个栗子:
//header.js
//Commonjs导出模块的方式
function Header() {
// 动态创建一个h2元素
var header = document.createElement('h2');
header.innerHTML = 'header';
document.body.appendChild(header)
}
module.exports=Header
其他两个文件也用这种方式导出function,那么在index.js中就应该这样来引入了:
var Header = require('./header.js')
var Main = require('./main.js')
var Side = require('./side.js')
new Header();
new Main();
new Side()
重新执行npx webpack ./js/index.js,打包完成后打开网页内容也还是会正确的显示在页面上
网友评论