webpack学习总结

一、什么是webpack

webpack不去构建你的资源，并且它将你的模块分开打包，它认为你的资源是模块本身。更准确的说webpack不是构建你所有的sass文件（sass是一种对css的一种提升,可以通过编译生成浏览器能识别的css文件。），优化你所有的所有图片，所有模块都打包，然后一股脑的都加载到页面。你的所有资源都被看作是一个个的模块，它们可以被包含导入、修改、维护，最终被打包进你的打包文件。

为了使它工作起来，需要在webpack配置文件中注册loaders。loaders都是很小的插件，他们最基本的功能都是：当遇到这种类型的文件，用这种方式去处理。最终所有的loaders链返回的都是string类型的类容，这样就允许webpack把返回结果包裹成JS模块。

 

二、为什么要使用webpack    

使用webpack的目的是为了实现前端网页代码的模块化，webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言，并将其转换和打包为合适的格式供浏览器使用。.

随着JS这门语言逐渐被应用到越来越广泛的范围，JS已经不再仅仅局限于应用在浏览器

比如在写代码时我们会写注释，但是这些注释对于浏览器来说它在解释的时候会把注释给忽略掉，当文件里有过多的注释时就会影响网络传输的效率。所以为了提高效率，webpack这个工具就可以帮助我们在后期上线时把一些无意义的注释、空格、换行给删掉。

前端工具是为了前端工程师实现开发的一个小软件，它的主要目的是为了实现结构优化，webpack就属于前端工具的一种。

这种方法的好处体现在images和css文件中或者JS文件中。想一想在很长的一段时间我们被训练将所有的东西都放进一个单个的文件中，只是为了减少HTTP请求。

现在一般都是将所有的资源打包到单文件例如app.js文件中，并且所有页面都引用这个文件，这会导致一个很大的问题。这意味着很多时候无论加载那个页面都会加载很多不需要的资源文件。如果这么做，可能在确定页面手动引入资源文件而不是其他的方式，这将导致维护和跟踪一个很大的依赖树，在这些页面这些已经加载的依赖是需要的吗？哪些页面的样式A和B有影响吗？

不管这些方法是对的或者错的，将webpack看成两面的——它不仅仅是一个构建系统工具或者是打包工具，它说一个只能的模块打包系统。一旦正确配置了，它甚至比你都更了解你的堆栈，它比你更清楚怎么去最好的优化你的堆栈。

 

三、核心概念

Webpack具有四个核心的概念，它们分别是Entry（入口）、Output（输出）、loader和Plugins（插件）。

1.Entry

Entry是Webpack的入口起点指示，它指示webpack应该从哪个模块开始着手，来作为其构建内部依赖图的开始。可以在配置文件（webpack.config.js）中配置entry属性来指定一个或多个入口点，默认为./src（webpack 4开始引入默认值）。

2.Output

Output属性告诉webpack在哪里输出它所创建的bundles，也可指定bundles的名称，默认位置为./dist。整个应用结构都会被编译到指定的输出文件夹中去，最基本的属性包括filename（文件名）和path（输出路径）。

值得注意的是，即是你配置了多个入口文件，你也只能有一个输出点。值得注意的是,output.filename必须是绝对路径，如果是一个相对路径，打包时webpack会抛出异常。

3.Loaders

loader可以理解为webpack的编译器，它使得webpack可以处理一些非JavaScript文件，比如png、csv、xml、css、json等各种类型的文件，使用合适的loader可以让JavaScript的import导入非JavaScript模块。JavaScript只认为JavaScript文件是模块，而webpack的设计思想即万物皆模块，为了使得webpack能够认识其他“模块”，所以需要loader这个“编译器”。

webpack中配置loader有两个目标：

• （1）test属性：标志有哪些后缀的文件应该被处理，是一个正则表达式。
• （2）use属性：指定test类型的文件应该使用哪个loader进行预处理。

此处需要注意的是定义loaders规则时，不是定义在对象的rules属性上，而是定义在module属性的rules属性中。

配置多个loader：

有时候，导入一个模块可能要先使用多个loader进行预处理，这时就要对指定类型的文件配置多个loader进行预处理，配置多个loader，把use属性赋值为数组即可，webpack会按照数组中loader的先后顺序，使用对应的loader依次对模块文件进行预处理。

4.Plugins

loader用于转换非JavaScript类型的文件，而插件可以用于执行范围更广的任务，包括打包、优化、压缩、搭建服务器等等，功能十分强大。要是用一个插件，一般是先使用npm包管理器进行安装，然后在配置文件中引入，最后将其实例化后传递给plugins数组属性。

插件是webpack的支柱功能，目前主要是解决loader无法实现的其他许多复杂功能，通过plugins属性使用插件。

 

四、三个核心功能

1.兼容性问题：随着ES6、ES7等JS语言规范的不断产生，浏览器的开发是有一定周期的，所以当程序员写的新规范在未更新的浏览器中运行时就需要把规范“降级”。这种时候webpack在打包的时候就会帮助我们自动把ES6、ES7的语法转化为ES5来解决兼容性的问题。

2.把多个JS压缩合成一个单个JS，分模块或者分功能的去划分，来减小开发可维护的压力，同时可以保证单个JS减小网络传输次数来提高网络传输效率。

3.实现异步加载JS的目的：最开始页面可能不需要把所有标签加载出来，但是浏览器会默认把所有的JS加载出来再去显示首屏页面，但是通过webpack打包压缩后，可以把一些不是特别急需的JS放到后面去加载，来提高首屏的加载时间，提高用户体验。

 

以上是在webpack的初步学习过程中的简单学习总结，后期在实际操作中还会补充。