初识webpack，从此你的眼界更加广阔

timg.jpg

写在前面

做过前端开发，尤其是使用过三大框架的同学，对于webpack一定不陌生，我们知道，当我们的项目，不再是只有几个html，css，js文件就可以完成的时候，我们会引入一种模块化的思想，让我们不同的业务功能处在不同的模块中，既然是这样，就需要一个工具来接下这样的模块，当然，这就是webpack的最主要功能，当然，他还可以通过各种手段，把一切资源解析为js。他还可以对我们的“巨无霸”项目，做代码分割，打包优化等。在后面的文章中，将为大家一一讲解。

webpack究竟是什么？

关于定义什么的，这里不再赘述，同学们可以去看官网了解大概，这里我将带着大家通过实践认识它。

模块化

在认识webpack之前，我们先简单实践一下前端的模块化思想。假设我们现在要开发一个html页面，并在其中执行一段脚本，我们可能会这样做(假设我们的功能使需要在页面中动态添加一些元素，实际业务场景要比这个复杂多)

var root = document.getElementById('root')
var header = document.createElement('div')
header.innerText = 'I am Header'
root.append(header)
var siderBar = document.createElement('div')
siderBar.innerText = 'I am siderBar'
root.append(siderBar)
var content = document.createElement('div')
content.innerText = 'I am content'
root.append(content)

上面的代码实际上是一种面向过程的编程方式，我们也发现了，所有的代码都堆积在一起，我们仅仅是做了一个简单的向页面中添加三个元素的功能，代码已经看起来很不爽，假如需要调错，就要从index.js页面里面轮着去找，很难受。于是，我们就将其改造成了面向对象的编程代码，我们将不同功能业务逻辑代码抽离出来，我们做了这样的改造

// header.js
function Header () {
    var header = document.createElement('div')
    header.innerText = 'I am Header'
    root.append(header)
}

// siderBar.js
function SiderBar () {
    var siderBar = document.createElement('div')
    siderBar.innerText = 'I am siderBar'
    root.append(siderBar)
}

// content.js
function Content () {
    var content = document.createElement('div')
    content.innerText = 'I am content'
    root.append(content)
}

// index.js
var root = document.getElementById('root')
new Header()
new SiderBar()
new Content()

经过上面的改造，我们已经将代码按照不同的业务逻辑分离出来，这样就可以单独维护了。但是，如果你亲手写了上面的代码，你会发现，上面的代码存在以下几个问题

• 我们无法在js文件中看出各个js文件之间的依赖关系
• 文件的运行依赖index.html中js文件的依赖顺序(可以自己试一下，因为上面的代码依然是自上而下执行的，如果我们把index.js放到前面，代码就会报错，并且因为js代码依赖关系不明显，我们并不能很方便的定位到错误所在)
• 因为要在index.html文件中引入4个js文件，相比于之前只引入一个，其加载势必会更慢，且会发送更多的http请求。

开发过vue或者react的同学这时候可能开始怀念我们使用import来引用文件来了，于是我们设想，能不能有一种方式让我们在html中只引入一个js文件，然后通过import来引入文件之间的依赖关系？下面我们对代码做一下修改，也就是让其按照我们的模块化来修改。

// index.js
import Header from './header.js'
import SiderBar from './siderBar.js'
import Content from './content.js'
var root = document.getElementById('root')

new Header()
new SiderBar()
new Content()

这个时候，我们会发现代码报错了

捕获.PNG

这是因为 我们在我们的代码中使用了ES6 的模块化语法，也就是ES Moudule模块引入方式，但我们的浏览器并不支持这种语法

webpack登场

上面的语法假如能成立，将解决上面遇到的所有问题，代码之间建立了模块化的关系。这个时候，就需要我们的webpack了。虽然我们的原生浏览器并不支持上面的模块化语法，但webpack知道。OK，我们就让webpack解决上面的问题吧。

• 首先，我们需要在我们的项目目录下安装webapck

我们先初始化一个npm 项目，这样会在我们的文件目录下初始化一个packjson,我们就可以使用npm包管理工具做一些包的操作了(基本操作，不再赘述)

npm init -y

安装webpack

 npm install webpack-cli --save-dev

这里我们可以不用单独安装webpack，一般来说我们安装cli就会顺带吧webpack也安装了。不放心的话可以单独安装。

• 下面，让我们通过webpack来运行上面浏览器不认识的代码吧

npx webpack index.js

先按上面的命令行写，后面会介绍为啥那么写，上面的意思就通过webpack去编译index.js文件。我们执行完文件后会出现下面的画面

1.PNG

可以大概看出来哈，上面是Webpack可能对我们的文件做了一些编译和处理，我们先不要管他的警告报错，这时候，我们回到我们的项目目录中，会发现，我们的项目中多了一个dist文件夹，其中有一个main.js文件。这就是webpack帮我们翻译好的文件。按照上面的设想，我们是不是可以只在index.html中引入main.js就可以了呢？当然了试过后，发现我们的页面中还是报错，如下：

2.PNG

这里并不是我们的webpack不好使，也不是我们的设想错误哈，这里解释一下，因为我们在index.js中使用了import语法，按照webpack的要求，我们必须对要引入的模块进行导出。于是我们需要对各个模块做类似于下面这样的“导出”操作

// 这里要把root节点的获取代码拿到单个模块中，
//因为我们模块化的代码不会再像之前那样存在变量的引用关系了，
// 需要在每个模块中单独定义
var root = document.getElementById('root')
export default Content
// 至于 export default 和export 的区别，这里不再赘述，自行度

经过我们的“导出”改造后，我们再运行上面的webpack编译指令，这时候再去运行代码，发现代码可以运行了。

写在后面

我们的代码通过上面的演示和配置已经可以运行了，我们也从感观上对webpack有个一个初步的认识。我们可能会说“webpack就是一个js代码的编译器”，其实这只是webpack其中一个小功能，我们将在后面对其做更深层次的剖析和应用。关注我，不迷路...