webpack es6 npm包_webpack

在讲webpack之前，引入个小插曲 nrm，大家都经常使用npm，那是包管理工具，可是这个nrm是个啥子东西。它是npm的镜像源管理工具，有时候国外资源太慢，使用这个就可以快速地在 npm 源间切换。我们有时候npm下载的时候会非常慢，大多数的时候会用cnpm去下载。那么其实nrm原理上就是切换了npm的源。

nrm ls                                                                                                                                   *npm ---- https://registry.npmjs.org/cnpm --- http://r.cnpmjs.org/taobao - http://registry.npm.taobao.org/eu ----- http://registry.npmjs.eu/au ----- http://registry.npmjs.org.au/sl ----- http://npm.strongloop.com/nj ----- https://registry.nodejitsu.com/

上述就是nrm可以选择的源， * 就是你默认选择的源，至于怎么切换源，执行命令nrm use xxxxxx。最后下载包的时候还是用的npm -g install webpack，因为nrm本质上只是改变了npm的下载源。
下面切入正题，首先webpack它是干啥的，为什么要用它？

问几个问题：

1.网页中会引用哪些常见的静态资源？

• JS(.js、.jsx、.coffee、.ts)

• CSS(.css、.less、.scss)

• Images(.jpg、.png、.gif、.bmp、.svg)

• 字体文件(.svg、.ttf、.eot、.woff、.woff2)

• 模板文件(.ejs、.jade、.vue)

2. 网页中引入静态资源多了以后会有什么问题呢？

• 网页加载速度变慢了，因为要发送很多请求

• 要处理很多复杂的依赖关系

3.以前我们是怎么解决上述问题的呢？

• 合并压缩js和css文件

• 图片用精灵图或者图片用base64编码

其实我们现在可以用 webpack和 gulp来帮助我们整合资源，那么为什么这两者有啥子区别呢，gulp是基于一个task任务来构建，而webpack是基于整个项目来构建的，此类区别就等于sqllite 和 oracle的区别，各有优势，就看你的需要了。比如以前你要引用一个jQuery，那么就是：

其中main.js是正常的执行逻辑，你要引入两个js文件，如果用webpack的话，那么只需要在main.js用

import $ from 'jquery'

所以你开心的就引用了 ，结果尼玛执行不了。难道是鄙人欺骗你吗？你发现没有，上述操作你用到了webpack吗？ import  $ from 'jquery'这玩意是ES6的语法，正常浏览器都解析不了，所以需要转化为低级语法 在终端运行命令：

webpack 要打包的文件的路径 打包好的输出文件路径

最终在html中引入打包好的输出的文件路径即可。上面的例子恰巧就说明了webpack能做啥？

• webpack能处理JS文件的相互依赖关系

• webpack能处理JS的兼容关系，把高级的浏览器不识别的语法转化为浏览器能正常识别的语法。

每次写上述打包语法是不是很烦，很浪费开发效率，当然有快捷的方式，得同志你自己去配置。所以webpack需要在根目录下配置webpack.config.js里面设置。下面举个简单的例子：

const path = require('path');module.exports =  {  entry:path.join(_dirname,'./要打包的文件的路径+文件名');  output:{      path:.join(_dirname,'./打包好的输出文件路径'),      filename:'/文件名'  }

作为一个程序员，有没有更加偷懒的方式呢，每次打包都需要输入webpack也是挺烦的，答案是肯定的。下面为你介绍一款插件webpack-dev-server，它的作用是啥呢，即时编译哇！还有live-server等插件，具体怎么用呢，(修改端口，修改默认打开路径，是否开启热编译)，还有就是html-wabpack-plugin这个热编译html的插件，x可以自己看官网的api去 。同时webpack还可以配置所有第三方loader模块，在module里面的rules里面配置第三方模块的匹配规则，譬如less，scss文件，你的有合适的模块去解析它，常用的loader模块有style-loader,css-loader,less-loader,sass-loader,url-loader。谈到loader，正好提到一点，我们面试的时候面试官经常会问： babel知道是干啥的吗？网上一搜，转化高级语法。那用在啥地方呢 ？因为webpack虽然会将一些js语法转化为浏览器识别的语法，但他也不是万能的，现在技术更新那么快，ES6甚至ES7的语法都出来了，比如下方的：

class Person {    static info: { id: 1, name: 'zhangsan'}}

上面这个ES6的语法就无法转换，山穷水复疑无路，babel奉命于危难之间，让这些高级的语法一点逼都装不起来直接硬生生给你转到ES3的语法，让那些浏览器宝宝们能够开心的识别。