手撕webpack

console.log(this)

快速上手webpack[toc]

webpack是什么?

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle

以上就是webpack官网的概念,简单地说,webpack就是个模块打包器现代前端开发为了方便,会在依赖关系上大作文章,以此来提高代码的可读性以及解耦。对程序员来说这是个很好的习惯,但对浏览器来说可有点难受了。

如果一个页面需要加载十几个js,十几个css文件的话那么网站的加载速度就会拖慢。而webpack就能将数个静态资源文件打包在几个静态资源文件中,这样就减少了HTTP请求,从而加快了网站加载速度。

当然,webpack并不仅仅只是将静态资源打包在几个文件中,它也能把浏览器不能识别的静态资源(如sass,less)转换成浏览器容易识别的静态资源

webpack工作方式

快速使用webpack

webpack包是托管在npm上的,所以我们需要用到npm包管理器,为了防止安装过程因网速导致一大堆ERROR,请在安装之前将npm镜像设置为淘宝镜像。当然也可以使用yarn安装。


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!