webpack概念

随着前端工程越来越复杂，单独建几个文件写业务代码已经无法保证项目的可维护性，所以就把不同的业务逻辑拆成模块，然后去分开引入这些模块，每个模块做自己的事情，这样就能保证项目的可维护性和可扩展性。但是假如有几千个模块，在页面能引入几千个JS文件么，所以当项目达到这种程度，我们就需要借助工具来管理我们的模块。
webpack就是这种工具来帮助我们管理模块，与webpack相似，还有很多相似的工具，比如说gulp、GRUNT、browserify,但是这两年webpack的使用率直线上升，比如说vue、React、Angular三大框架的脚手架工具都开始使用webpack作为项目底层的构建，这得益于webpack会提供其他工具无法实现的一些特性，比如说：Tree shaking、懒加载、代码分割等等

所以使用webpack做代码管理工具已经是越来越多的前端开发者的共识，学会webpack会更深层的去思考前端工程化上的内容，也能发现在代码的背后别有洞天，学习webpack将极大的扩充前端开发视野。
webpack4相对于之前的版本约了比较大的变化，速度更快，大型项目节约90%构建时间，内置了更多的默认配置，变更了许多API。
学习webpack的知识储备：nodejs、webpack基础
收获：
彻底学会webpack的配置，理解webpack的作用及原理、上手项目的打包过程配置、拥有工程化的前端思维、步入高级前端工程师行列。

webpack究竟是什么？

webpack究竟是什么，它的产生背景以及它所能解决的问题是什么？
在最初我们写一个web网页的时候，是这样做的，创建一个index.html文件，写一个网页的最基础标签内容，在head中写一些样式，在script标签中写一些业务逻辑，或者引入外部的JS文件，在浏览器中打开就可以看到我们创建的网页了。

随着前端技术的发展，JS实现的代码内容越来越多，所以如果通过面向过程的方式写代码，代码就会变得非常长，所以面向对象编程就出现了，把页面的各个部分变成多个对象来写，所以创建多个文件，各文件定义构造函数，在构造函数中去做各部分的逻辑，将这些JS文件都在index.html中加载，然后在index.js文件中创建各文件的对象。



通过面向对象改造了我们的代码，使代码更具有维护性。
这样回造成新的问题，在index.html当中我们引入了太多的JS文件，这样回带来几个问题：
1.整个页面的加载速度会变慢，以前只需要加载一个JS文件就好了，现在需要加载多个JS文件，页面会多出三个http请求，加载速度会变慢。
2.在index.js文件中，会看到创建对象，但是并不能看到Header类对应的文件是哪一个，从代码当中看不出文件的位置的相互关系
3.很难排错，例如在index.html中我们将content.js文件放在index.js后面，那将会找不到Content类，很难找出问题，代码变得不容易维护。
针对以上问题，想出的解决办法，还是在index.html中只引入index.js，如果index.js想用各个类，在index.js文件中自己引入各个文件
这样在index.html只引入了index.js文件，网页的运行速度会很快。第二点，文件和文件的依赖关系非常明确，目录结构一目了然。颠倒顺序也不会出现问题，因为在运行index.js文件之前再上面已经引入了依赖的几个模块或者类。

这种模块的引入叫做ES Moudule模块引入方式（在vue、react中这种语法都能用），但是这种引入方式在这里会报错，为什么？

其实在浏览器中不认识import这种语句，不能识别是在做什么，如果想这么去实现我们的代码是不可能的，这个时候webpack就登场了，虽然原生浏览器不知道import语句是什么意思，但是webpack知道import是要引入一个模块，可以帮浏览器做一个翻译，就可以正确运行代码了。
安装webpack对代码进行翻译

如何安装webpack？

1.进入项目文件目录运行 npm init lesson (前提是已经安装nodejs和npm包管理工具)
初始化一个名字为lesson的包，回车按照默认的条件来创建一个npm包的配置文件，这个命令实际上在我们的项目目录下创建了一个package.json文件
2. 执行npm install webpack-cli --save--dev 回车，正常来说当你安装webpack-cli的时候，会帮我们把webpack也安装了，也可以npm install webpack --save 安装webpack
3. 现在已经在项目中安装好了webpack，安装webpack的目的是对代码进行翻译，在命令行中运行npx webpack index.js，意思是翻译index.js这个文件
这个时候我们打开我们的项目文件，发现里面多了一个dist文件，在这个文件里面有个main.js文件，这就是webpack翻译好的文件
4.打开我们的index.html文件，引入的是inde.js 文件，这个文件是不能运行的（因为有浏览器不能识别的语句），但是webpack帮我们翻译的dist/main.js是可以运行的，所以我们把index.html的引用改为dist/main.js运行。

在浏览器中打开，发现有报错：

webpack翻译的是index.js文件，当它尝试去引入Header、SideBar、Content这三块的内容，但是如果用ES Moudule的形式引入，webpack是要求模块是使用ES Moudule的形式导出的，这样引用才会引入，如何导出呢？

我们打开content.js，只需要用export default ES Moudule 的语法把构建类导出即可

重新运行npx webpack index.js 就可以运行了