webpack plugin loader和node.js

ES6新特性：
1、let const
声明一个变量，一般为局部变量。const声明一个变量设置值后不再改变。
2、解构赋值
let [a, b, c] = [1, 2, 3]
3、箭头函数
修复了this的指向，使其永远指向词法作用域，是定义时所在的对象。
4、延展操作符
let num = [1, 2, 3];   ...num;
5、类
引入了class类的概念，与多数传统语言类似
6、import和export
import引入模块，export导出模块
7、Promise

react优缺点：
优点

1、React速度很快：它并不直接对DOM进行操作，引入了一个叫做虚拟DOM的概念，安插在javascript逻辑和实际的DOM之间，性能好。
2、跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
3、一切都是component：代码更加模块化，重用代码更容易，可维护性高。
4、单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
5、同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
6、兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

缺点

1、React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

webpack的plugin和loader的区别：
对于loader，它就是一个转换器，将A文件进行编译形成B文件，这里操作的是文件，比如将A.scss或A.less转变为B.css，单纯的文件转换过程；

对于plugin，它就是一个扩展器，它丰富了wepack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，例如

run：开始编译
make：从entry开始递归分析依赖并对依赖进行build
build-moodule：使用loader加载文件并build模块
normal-module-loader：对loader加载的文件用acorn编译，生成抽象语法树AST
program：开始对AST进行遍历，当遇到require时触发call require事件
seal：所有依赖build完成，开始对chunk进行优化（抽取公共模块、加hash等）
optimize-chunk-assets：压缩代码
emit：把各个chunk输出到结果文件
通过对节点的监听，从而找到合适的节点对文件做适当的处理。

webpack提供了很多有用的原生插件

UglifyJsPlugin new webpack.optimize.UglifyJsPlugin([options])

解析/压缩/美化所有的js chunk，传入options可以满足更多的定制化需求
sourceMap 生成SourceMap文件，会导致编译过程变慢，默认true
test/include/exclude 使用一个或多个正则表达式来过滤要处理的文件
mangle 通过设置except数组来防止指定变量被改变

new webpack.optimize.UglifyJsPlugin({
    mangle: {
        except: ['$super', '$', 'exports', 'require']
    }
})
ExtractTextPlugin var ExtractTextPlugin = require("extract-text-webpack-plugin");

该插件会提取entry chunk中所有的require('*.css')，分离出独立的css文件。

new ExtractTextPlugin([id: string], filename: string, [options])
一个entry生成一个文件，当多个entry的时候，可以用[name]/[id]/[contenthash]来生成多个文件
id 插件实例的唯一标识，自动生成
filename 输出的filename，可以通过[name]/[id]/[contenthash]自定义filename
options.allChunks 提取所有的chunk（默认只提取initial chunk）
options.disable disable该插件

ExtractTextPlugin.extract([notExtractLoader], loader, [options])
该方法将已经存在的loader转换成一个提取loader
notExtractLoader 不提取css时需要使用的loader
loader 用来将资源文件转换为css输出模块的loader
options.publicPath 覆盖loader的publicPath设置

let ExtractTextPlugin = require('extract-text-webpack-plugin');

// multiple extract instances
let extractCSS = new ExtractTextPlugin('stylesheets/[name].css');
let extractLESS = new ExtractTextPlugin('stylesheets/[name].less');

module.exports = {
    ...
    module: {
        loaders: [
            { test: /\.scss$/i, loader: extractCSS.extract(['css', 'sass']) },
            { test: /\.less$/i, loader: extractLESS.extract(['css', 'less']) },
            ...
        ]
    },
    plugins: [
        extractCSS,
        extractLESS
    ]
};
DedupePlugin new webpack.optimize.DedupePlugin()

有些JS库有自己的依赖树，并且这些库可能有交叉的依赖，DedupePlugin可以找出他们并删除重复的依赖。

NoErrorsPlugin new webpack.NoErrorsPlugin()

跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误。

ProvidePlugin new webpack.ProvidePlugin(definitions)

definitions 定义标识符，当遇到指定标识符的时候，自动加载模块。

new webpack.ProvidePlugin({
    $: "jquery"
})

// in a module
$("#item") // <= just works
// $ is automatically set to the exports of module "jquery"
CommonsChunkPlugin new webpack.optimize.CommonsChunkPlugin(options)

提取代码中的公共模块，然后将公共模块打包到一个独立的文件中，以便在其他的入口和模块中使用。别忘了在html中单独引入抽离出来的公共模块。
常见的使用场景：

抽离多个entry的公共模块
new CommonsChunkPlugin({
    name: "commons",
    // (the commons chunk name)

    filename: "commons.js",
    // (the filename of the commons chunk)

    // minChunks: 3,
    // (Modules must be shared between 3 entries)

    // chunks: ["pageA", "pageB"],
    // (Only use these entries)
})
抽离vendor模块
entry: {
  vendor: ["jquery", "other-lib"],
  app: "./entry"
}
new CommonsChunkPlugin({
  name: "vendor",

  // filename: "vendor.js"
  // (Give the chunk a different name)

  minChunks: Infinity,
  // (with more entries, this ensures that no other module
  //  goes into the vendor chunk)
})
抽离子模块中的公共模块到父模块中，会增加首屏加载的时间
new CommonsChunkPlugin({
    // names: ["app", "subPageA"]
    // (choose the chunks, or omit for all chunks)

    children: true,
    // (select all children of chosen chunks)

    // minChunks: 3,
    // (3 children must share the module before it's moved)
})
和3类似，不过不是抽离到父模块，而且额外抽离出一个异步的公共模块
new CommonsChunkPlugin({
    // names: ["app", "subPageA"]
    // (choose the chunks, or omit for all chunks)

    children: true,
    // (use all children of the chunk)

    async: true,
    // (create an async commons chunk)

    // minChunks: 3,
    // (3 children must share the module before it's separated)
})

webapck中使用loader的方法有三种

　　使用loader之前必须运行安装 : npm install --save-dev xxx-loader

　　(1)通过CLI : 命令行中运行 webpack --module-bind jade  --module-bind 'css=style!css'   

　　　　//jade,style,css后面可省略-loader，他们分别对.jade使用jade-loader,对.css使用style-loader和css-loader

　　(2)通过require : require('style-loader!css-loader?module!./style/main.css')

　　　　//对main.css使用css-loader和style-loader加载,loader解析顺序是从右往左 

　　(3)通过配置webpack.config.js : 

　　//在webpack.config.js插入modules属性;(1)rules中包含对象数组，每个对象中{test,use}test对应正则表达式,use包含多个所需loader，如只需一个loader可省去use，格式如:loader : 'xxx-loader'

复制代码
modules : {
    rules : [
        {
　　　　  test : /\.css/,
         use : [
            { loader : 'style-loader'},
            {
               loader : 'css-loader',
               options : {
                  module : true     
               }
             } 
          ]
    　　 }，
　　　　{//第二个loader}，
　　　　{//第三个loader}
　　]      
}
复制代码
 

　　1.模板:

　　　　(1)html-loader:将HTML文件导出编译为字符串，可供js识别的其中一个模块

　　　　(2)pug-loader : 加载pug模板

　　　　(3)jade-loader : 加载jade模板(是pug的前身，由于商标问题改名为pug)

　　　　(4)ejs-loader : 加载ejs模板

　　　　(5)handlebars-loader : 将Handlebars模板转移为HTML

　　2.样式:

　　　　(1)css-loader : 解析css文件中代码

　　　　(2)style-loader : 将css模块作为样式导出到DOM中

　　　　(3)less-loader : 加载和转义less文件

　　　　(4)sass-loader : 加载和转义sass/scss文件

　　　　(5)postcss-loader : 使用postcss加载和转义css/sss文件

　　3.脚本转换编译:

　　　　(1)script-loader : 在全局上下文中执行一次javascript文件，不需要解析

　　　　(2)babel-loader : 加载ES6+ 代码后使用Babel转义为ES5后浏览器才能解析

　　　　(3)typescript-loader : 加载Typescript脚本文件

　　　　(4)coffee-loader : 加载Coffeescript脚本文件

　　4.JSON加载:

　　　　(1)json-loader : 加载json文件（默认包含）

　　　　(2)json5-loader : 加载和转义JSON5文件

　　5.Files文件

　　　　(1)raw-loader : 加载文件原始内容(utf-8格式)

　　　　(2)url-loader : 多数用于加载图片资源,超过文件大小显示则返回data URL

　　　　(3)file-loader : 将文件发送到输出的文件夹并返回URL(相对路径)

　　　　(4)jshint-loader : 检查代码格式错误

　　6.加载框架:

　　　　(1)vue-loader : 加载和转义vue组件

　　　　(2)angualr2-template--loader : 加载和转义angular组件

　　　　(3)react-hot-loader : 动态刷新和转义react组件中修改的部分,基于webpack-dev-server插件需先安装,然后在webpack.config.js中引用react-hot-loader

比较重要的plugin和loader：
HtmlWebpackPlugin：HtmlWebpackPlugin简化了HTML文件的创建，以便为您的 webpack bundle 提供服务。这对于被更改文件的文件名中包含每次编译哈希(hash) 的webpack bundle尤其有用。您可以让插件为您生成一个HTML文件，使用lodash templates提供您自己的模板，或使用自己的加载器(loader)。

CopyWebpackPlugin：在webpack中拷贝文件和文件夹

CommonsChunkPlugin：现在假设入口文件里面有
entry:{
    main1:'./app/js-uglify/a.js',
    main2:'./app/js-uglify/b.js',
    vendor:['./app/js-uglify/j1','./app/js-uglify/j2']
}
a.js和b.js是项目文件，j1和j2是第三方插件
出口文件配置：
 output: {
    path: BUILD_PATH,
    filename: '[name].bundle.js'
 }
增加模块插件：
new webpack.optimize.CommonsChunkPlugin({
  name: 'common',
  chunks: ['main1', 'main2'],
  filename: 'common.bundle.js',
  minChunks: 2,
}),
new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  chunks: ['common'],
  filename: 'vendor.bundle.js',
  minChunks: Infinity,
})
执行-p后，可以在build目录下，生成以下几个文件:
main1.bundle.js -> 仅包含main1.js的代码文件 
mian2.bundle.js -> 仅包含main2.js的代码文件
common.bundle.js -> 包含main1.js和main2.js公共部分的代码文件（不包含第三方库代码） 
vendor.bundle.js -> 仅包含第三方库
可以用来抽取第三方类库和框架，这样每一个入口文件无论是否调用它们，都不会将它们重复打包进去

LoaderOptionsPlugin：

UglifyJsPlugin：

DefinePlugin：允许你创建一个在编译时可以配置的全局常量

babel-loader：加载ES6+ 代码后使用Babel转义为ES5后浏览器才能解析
style-loader：将css模块作为样式导出到DOM中
css-loader：解析css文件中代码
sass-loader：加载和转义sass/scss文件
url-loader：多数用于加载图片资源,超过文件大小显示则返回data URL

http和https的区别：
超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。

为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。

一、HTTP和HTTPS的基本概念

HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。

HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。

二、HTTP与HTTPS有什么区别？

HTTP协议传输的数据都是未加密的，也就是明文的，因此使用HTTP协议传输隐私信息非常不安全，为了保证这些隐私数据能加密传输，于是网景公司设计了SSL（Secure Sockets Layer）协议用于对HTTP协议传输的数据进行加密，从而就诞生了HTTPS。

简单来说，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全。

HTTPS和HTTP的区别主要如下：

1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。

2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

三、HTTPS的工作原理

我们都知道HTTPS能够加密信息，以免敏感信息被第三方获取，所以很多银行网站或电子邮箱等等安全级别较高的服务都会采用HTTPS协议。

1、客户端发起HTTPS请求

这个没什么好说的，就是用户在浏览器里输入一个https网址，然后连接到server的443端口。

2、服务端的配置

采用HTTPS协议的服务器必须要有一套数字证书，可以自己制作，也可以向组织申请，区别就是自己颁发的证书需要客户端验证通过，才可以继续访问，而使用受信任的公司申请的证书则不会弹出提示页面(startssl就是个不错的选择，有1年的免费服务)。

这套证书其实就是一对公钥和私钥，如果对公钥和私钥不太理解，可以想象成一把钥匙和一个锁头，只是全世界只有你一个人有这把钥匙，你可以把锁头给别人，别人可以用这个锁把重要的东西锁起来，然后发给你，因为只有你一个人有这把钥匙，所以只有你才能看到被这把锁锁起来的东西。

3、传送证书

这个证书其实就是公钥，只是包含了很多信息，如证书的颁发机构，过期时间等等。

4、客户端解析证书

这部分工作是有客户端的TLS来完成的，首先会验证公钥是否有效，比如颁发机构，过期时间等等，如果发现异常，则会弹出一个警告框，提示证书存在问题。

如果证书没有问题，那么就生成一个随机值，然后用证书对该随机值进行加密，就好像上面说的，把随机值用锁头锁起来，这样除非有钥匙，不然看不到被锁住的内容。

5、传送加密信息

这部分传送的是用证书加密后的随机值，目的就是让服务端得到这个随机值，以后客户端和服务端的通信就可以通过这个随机值来进行加密解密了。

6、服务段解密信息

服务端用私钥解密后，得到了客户端传过来的随机值(私钥)，然后把内容通过该值进行对称加密，所谓对称加密就是，将信息和私钥通过某种算法混合在一起，这样除非知道私钥，不然无法获取内容，而正好客户端和服务端都知道这个私钥，所以只要加密算法够彪悍，私钥够复杂，数据就够安全。

7、传输加密后的信息

这部分信息是服务段用私钥加密后的信息，可以在客户端被还原。

8、客户端解密信息

客户端用之前生成的私钥解密服务段传过来的信息，于是获取了解密后的内容，整个过程第三方即使监听到了数据，也束手无策。

六、HTTPS的优点

正是由于HTTPS非常的安全，攻击者无法从中找到下手的地方，从站长的角度来说，HTTPS的优点有以下2点：

1、SEO方面

谷歌曾在2014年8月份调整搜索引擎算法，并称“比起同等HTTP网站，采用HTTPS加密的网站在搜索结果中的排名将会更高”。

2、安全性

尽管HTTPS并非绝对安全，掌握根证书的机构、掌握加密算法的组织同样可以进行中间人形式的攻击，但HTTPS仍是现行架构下最安全的解决方案，主要有以下几个好处：

（1）、使用HTTPS协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；

（2）、HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。

（3）、HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本。

七、HTTPS的缺点

虽然说HTTPS有很大的优势，但其相对来说，还是有些不足之处的，具体来说，有以下2点：

1、SEO方面

据ACM CoNEXT数据显示，使用HTTPS协议会使页面的加载时间延长近50%，增加10%到20%的耗电，此外，HTTPS协议还会影响缓存，增加数据开销和功耗，甚至已有安全措施也会受到影响也会因此而受到影响。

而且HTTPS协议的加密范围也比较有限，在黑客攻击、拒绝服务攻击、服务器劫持等方面几乎起不到什么作用。

最关键的，SSL证书的信用链体系并不安全，特别是在某些国家可以控制CA根证书的情况下，中间人攻击一样可行。

2、经济方面

（1）、SSL证书需要钱，功能越强大的证书费用越高，个人网站、小网站没有必要一般不会用。

（2）、SSL证书通常需要绑定IP，不能在同一IP上绑定多个域名，IPv4资源不可能支撑这个消耗（SSL有扩展可以部分解决这个问题，但是比较麻烦，而且要求浏览器、操作系统支持，Windows XP就不支持这个扩展，考虑到XP的装机量，这个特性几乎没用）。

（3）、HTTPS连接缓存不如HTTP高效，大流量网站如非必要也不会采用，流量成本太高。

（4）、HTTPS连接服务器端资源占用高很多，支持访客稍多的网站需要投入更大的成本，如果全部采用HTTPS，基于大部分计算资源闲置的假设的VPS的平均成本会上去。

（5）、HTTPS协议握手阶段比较费时，对网站的相应速度有负面影响，如非必要，没有理由牺牲用户体验。

node.js和npm
简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

node.js是javascript的一种运行环境，是对Google V8引擎进行的封装。是一个服务器端的javascript的解释器。

包含关系，nodejs中含有npm，比如说你安装好nodejs，你打开cmd输入npm -v会发现出啊线npm的版本号，说明npm已经安装好。

其实npm是nodejs的包管理器（package manager）。我们在Node.js上开发时，会用到很多别人已经写好的javascript代码，如果每当我们需要别人的代码时，都根据名字搜索一下，下载源码，解压，再使用，会非常麻烦。于是就出现了包管理器npm。大家把自己写好的源码上传到npm官网上，如果要用某个或某些个，直接通过npm安装就可以了，不用管那个源码在哪里。并且如果我们要使用模块A，而模块A又依赖模块B，模块B又依赖模块C和D，此时npm会根据依赖关系，把所有依赖的包都下载下来并且管理起来。试想如果这些工作全靠我们自己去完成会多么麻烦！