前端干货系列----入门webpack这一篇文章就够了

博主学习webpack，并非由于项目须要，而是由于webpack如今比较流行，因此想学习一下，顺便看看对如今的项目是否有用。最后通过思考感受对当前项目的做用并不大，不过总结了一下webpack适合使用的几个场景

1.先后端分离的项目，像vue,angular,react都采用了webpack。如今三大主流框架（vue,react,angular）为先后端分离提供了一些基础条件，使得不少界面不在借助于后端的模板渲染能够本身进行模板渲染。说实在的若是前端不能本身实现模板渲染，不少需求的实现真的太麻烦了，好比列表，没有模板渲染，你须要本身写一串js代码实现列表循环，如今只须要添加几个属性便可实现。博主的项目由于是先后端不分离的，采用的framework进行的渲染，因此感受webpack起到的做用并非特别大，并且维护起来还比较麻烦。

2.混合应用开发，像ionic就使用了webpack进行了ts的编译，极大的方便了开发。只须要搞懂一点点webpack就可以自动启动服务，检测代码修改自动刷新浏览器。十分方便

3.SPA应用（单页面应用）,对于这个我的感受是很是爽的,webpack将一大堆的文件打包成一个文件，不只减小了开发人员的工做量还解决了请求个数的问题，想一想就开心。

若是有其余的使用场景还请水友提出，我将进行补充

本篇文章也仅仅是对webpack入门和一些坑进行的讲解，须要提升的同志能学到的东西并非不少，由于我本身的项目对webpack的使用很少，因此并不想花太多的经历把webpack搞得太深，只是但愿别人聊起webpack我最起码略知一二，不至于连现现在高大上的webpack都一点不懂，哈哈。

众多打包工具为什么webpack可以独占鳌头？

在这里我将经过对比gulp和百度的fis来突出webpack的优势。

gulp：既然gulp被webpack反杀了，必定是有不如人的地方，以gulp为表明的传统打包最大的问题是解决不了按需打包，就更别说按需加载了，由于传统的打包思路是遍历源文件 => 匹配规则 => 打包/处理，也就是说只要被规则命中了，即使是程序用不到的模块也会被无脑打包，根本缘由是按需这个事没法被规则描述，只能被程序逻辑描述。

百度fis：其实在webpack以前不是没有解决方案，百度fis最得意的地方就是解决了这个问题，而且是理论上堪称完美的解决方案，我感受其最大的缺点是须要后端配合，然而你懂的，后端一般不鸟这种需求，百度fis也就不了了之了。

也就是说webpack不只可以按需加载，还不依赖后端开发，固然了webpack还实现了分包开发。webpack能实现这些与他的打包逻辑是密不可分的入口文件 => 分析代码 => 找出依赖 => 打包。也就是说入口文件里面没有引用的文件是不会被打包进来了，就这样简简单单的实现了按需加载，这就是大道至简吧。这就是webpack最有价值的地方。

webpack入门：

使用webpack你首先电脑里面要有webpack吧，那就要安装webpack（须要先确保你安装了npm）：

1.初始化一个项目（没有这个也同样用webpack，不过不多有独立于npm存在的webpack，我也就不搞特殊了）

npm init复制代码

2.若要安装最新版本或特定版本，请运行如下命令之一：

npm install --save-dev webpack
npm install --save-dev webpack@<version>复制代码

3.若是您使用的是WebPack 4或更高版本，您还须要安装CLI。

npm install --save-dev webpack-cli复制代码

注意：这里有个坑，webpack4实现了零配置，webpack3还没实现，而网上大部分的文档都是4以前的，致使按照他们的步骤操做会出现错误。看别人的博客只适合于快速阅读和理解，获取第一手信息仍是去看官网比较好。webpack官网资料仍是特别全的，而且提供了中文版和英文版，不过中文版翻译的不全，不少都是404错误，建议直接看英文版，英语水平不高的可使用谷歌浏览器带的翻译。这个错误主要是在src文件夹下没有找到文件，由于webpack默认的进入文件指定在src下面。原本想给大家截图来着，不过发现不放在src文件夹下也能直接打包了，多是webpack兼容了。

4.在根目录建立webpack.config.js文件

5.配置webpack.config.js(不配置这个文件也能进行打包，不过我这里就不进行这种讲解了，由于无论多简单的配置记录下来都是很重要的，好记性不如烂笔头)

入门webpack了解entry,module,plugins,output就够了。最简单的webpack配置只须要有entry就够了。

entry:打包入口文件，这个文件里面的配置你能够随意引用，当你使用webpack打包命令的时候就会将这里面所引用的全部文件打包成一个js文件（这里仅限于js文件）采用json的键值对的格式。左边对应的名字，右边对应着文件。配置多个就表明你想将多个文件打包整合

注意：博主这里的名字叫index/login，是有特殊用途的，会在output这里讲解

output:打包的出口文件,指你想将打包出来的文件存了哪里叫什么名字。filename文件的名字,path,文件的路径,publicpath用于配置相应的域名。

文中的[name]表明entry中的名字,你若是写的是index/login生成的文件名字就是index/login.bundle.js,当他放到你指定的path目录下的时候会自动生成一个index的文件夹来达到分文件夹的做用，是否是至关黑科技。

module：webpack其实只能给js进行打包，他实际上是不识别css，文件，图片等等的。想要识别这些东西就须要给他配置module下的rules。比较经常使用的参数就是：text,匹配规则.像文中的/\.css$/表明着匹配以css结尾的文件。use，表明着加载方式，后面的参数表明着采用什么加载，若是指定错了就会打包错误，像css固定使用style-loader便可，固然了加载方式都是依赖插件的，须要将style-loader和css-loader插件经过npm下载下来（这里就不普及npm的用法了）。

plugins:根据名字你就指定这是插件了，webpack提供了不少插件，你经过这些插件能够实现各类各样的操做，这里就不过多概述了

webpack的功能和复杂度远不止这些，文章中的内容也并非特别精美，许多更有趣的内容也不知道怎么表达出来。不过仍是要写下来，万一帮助到大家了我就赚了，对于博主来讲做为一个烂笔头之后使用的时候也会快速拿起来进行使用。

最后推荐几篇博主在学习webpack的时候感受很是棒的文章，不读这篇文章也必定要读下面的文章：

webpack官网，能够一步一步根据这个进行操做，实现打包

webpack使用场景的讲解

webpack的许多小技巧（不是直接写明了，可是能从里面挖出来，很是棒！）,里面是一系列的文章。