webpack

一.初识Webpack？
1.什么是Webpack？
Webpack是模块化管理及打包工具/模块打包机（ module bundler）
包括两个方面：
 模块化管理
 打包工具

具体来说，webpack所做 的事情就是：分析你的项目结构，找到js模块以及其它的一些浏览器不能直接运行的拓展语言（Less、Sass、TypeScript），并将其打包为合适的格式供浏览器使用。

通常是在开发浏览器的应用时，经常用到的一个工具。
2.为何要使用Webpack？
如今的网页已经不是传统的网站了，而是功能丰富的应用 —web app。
拥有复杂的js代码和一大对依赖包，为简化开发复杂度，提高开发效率，涌现了大量的实践：
 模块化
 全新的js写法，如ES6、TypeScript、CoffeeScript
 Less、Sass等css预处理器

有了这些实践，可以提高开发效率，更好的组织我们的代码。但是比较遗憾的是，这些特性太新了，浏览器根本没有跟上这个节奏，很多特性在浏览器中根本不予支持。
需要找到一些方式来解决这个问题，手动解决。
需要有一些好的工具来帮我们解决这个问题。

比如模块化的问题。
CommonJS，node服务端的模块化解决方案。
浏览器端，requireJS、seaJS等，在两三年前还是炙手可热的。
Browserify，使用有点繁琐。
Webpack

写一个简单代码来说明一下：

项目结构如下：

编写js文件如下：

在index.html中，引入app.js，如下:

然后，浏览页面，结果如下：

说明浏览器本身还不支持这种 模块化 编码方式。

Require本身是CommonJS中，也就说Node中采用的模块解决方案。

3.Webpack的优势？
其实关于浏览器的 模块化 解决方案有多种：
 RequireJS
 Seajs
 Browserify
 Webpack
Web的优势：
 将依赖树拆分成按需加载的块
 初始化加载的耗时尽量少
 各种静态资源都可以视作模块
 将第三方库整合成模块的能力
 可以自定义打包逻辑的能力
 适合大项目，无论是单页还是多页的 Web 应用
二.Webpack快速入门
1.安装
Webpack也是基于node.js的，安装node.js是前提。

然后才是 全局安装 webapck

npm insall -g webpack

可以使用webpack -h 查看一下：

2.入门案例
第一步，创建一个index.html，在其中引入入口文件app.js，如下：

第二步，在js目录下，定义了一个cats.js文件，编写代码如下：

第三步，在js目录下，新建一个app.js，使用require引入cats.js，如下：

第四步，在浏览器中 浏览 index.html，打开开发中工具，如下：

第五步，使用webpack命令将app.js进行打包即可，如下：

查看目录，多了一个bundle.js文件，如下：

第六步，在index.html中，引入bundle.js，如下：

再次浏览index.html页面，如下：

Ok！

在整个过程中，我们使用了webpack进行打包。
命令如下：
webpack 源文件 目标文件
3.webpack是如何工作的？
使用webpack打包之后，形成一个新的文件，如下：

不仅将app.js的代码打包进来，同时也将app.js所依赖的cats.js打包进来，说明将所有依赖的文件，都打包放入放到bundle.js文件中。

打包原理是边读边分析入口文件的依赖，分析入口文件依赖的文件的依赖，以此类推，只要有依赖都去分析并打包到输出文件中。

上述代码，打包过程如下：

三.在开发中使用Webpack
1.典型流程
这是一个典型的流程：
 创建项目结构
 初始化项目，使用npm init命令，创建package.json配置文件
 编写项目代码
 创建及配置webpack.config.js
 使用webpack命令打包
 安装相应的loader和插件
 修改webpack.config.js,使其应用相应的loader和插件

在搭建好项目结构，以及初始化好package.json之后，就基于编写项目代码。
2.使用配置文件
在前面的案例中，我们是直接使用 webpack app.js bundle.js来打包的。
在实际开发时，很少会这么用。
一般我们都会结合配置文件来使用，更方便、更高效。

这个配置文件的名称是固定的 ----- webpack.config.js
放在项目的根目录即可。

这个配置文件是基于node.js的写法。也是作为webpack的一个模块来使用的。

需要使用module.exports={}来进行配置。
最小配置：
 需要指定入口文件，entry
 需要指定打包之后的目标文件 output

其中output比较特殊，需要分别指定 输出路径和目标文件名
 输出路径：path
 目标文件名：filename

配置完成之后，我们就可以使用 webapck命令来进行打包。

查看目标文件夹，如下：

说明打包已经完成。

在执行webpack命令时，会自己读取并引入webpack.config.js文件，使用其中的配置来完成打包过程。

在页面中，引入打包之后的目标文件即可，如下：

3.结合npm命令使用Webpack
由于webpack是基于node.js的，我们完全可以结合npm命令来使用webpack。
使用这种方式会更加方便。

在package.json配置文件中，有个配置项—scripts，它可以配置一些命令。然后使用npm run 命令来执行。

然后，直接使用 npm run build执行即可。

4.构建本地服务器
在开发过程中，我们经常需要一边编写代码，一边查看效果。
在当前这个配置下，其实我们每次修改代码之后，需要重新再次打包，然后刷新。
这个我们忍受不了。

如果文件比较多，打包的过程会消耗更多的时间。
所以，我们需要有一个及时刷新的功能。

有一个工具—webpack-dev-server

这是一个使用express搭建的一个微型服务器，然后结合了socket.io来完成刷新的。

实现步骤：
第一步，安装 webpack-dev-server

第二步，需要本地安装 webpack。

第三步，需要配置webpack.config.js
在webpack.config.js中增加一个devServer参数，其中有如下三个重要的配置：
 port：设定服务器的端口，默认为8080
 Inline：设置为true即可
 hot：热更新，设置为true即可

devServer有如下几个选项：

配置选项 说明
contentBase 默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录
port 设置默认监听端口，如果省略，默认为”8080“
inline 设置为true，告诉我们内联HMR的逻辑然后插入页面（而不是在iframe页面呈现）
hot 启用HMR
historyApiFallback 在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html

第四步，启动服务器

使用命令 webpack-dev-server --inline --hot
直接使用回报如下一个错误：

由于webpack-dev-server是本地安装的，所以需要进入这个模块的bin目录下，才能执行。
这样比较麻烦，可以使用 npm 命令，在package.json中配置如下：

npm会自己去找这个命令，在这个配置中，不需要写命令的全路径。

使用 npm run update启动服务器

一旦启动，可以使用http://localhost:3000来访问页面

第五步，修改index.html中script的src属性

修改index.html中script的src属性为http://localhost:3000/bundle.js

就可以一边修改代码，一边查看效果。

ps：一旦使用webpack-dev-server，使用webapck打包，并不会将结果保存到 output指定的那个文件。而是保存到内存中。
在内存里面有一个bundle.js。
我们需要使用http：//localhost:3000/bundle.js去引用它。

还有另外一种方案：使用webpack -w 命令
效率会低一些。

简单回顾：
什么是webpack？
模块打包机，有两大功能：
 可以使得我们在浏览器端使用模块化的方式来编写js代码。（对比node.js中的模块化）
 可以将各种模块、文件进行打包，生成最终可以在浏览器执行的一个js文件，打包的时候，并不是简单的合并，而是可以处理各种目前浏览器不支持的一些js写法（es6的新特性、typescript、less和sass）。

Webpack是目前最火的一个前端工具。
一些大型的框架或库都会用到webpack。React.js、vue、angularjs2等。

典型使用流程
第一步，全局安装webpack
第二步，本地安装webpack
第三步，需要使用webpack.config.js进行相关配置
第四步，在开发过程中，需要安装对应的模块、loader或插件等
第五步，一旦安装新的模块、loader或插件，就需要进行新的配置
第六步，执行相应的打包命令

在开发时，最好是结合package.json来执行相应的命令。

重要配置
webpack.config.js是基于node.js的一个写法。
实际上，所谓的配置其实就是一个对象。然后需要将这个对象使用module.exports导出即可。
基本配置，entry和output。
entry指定入口文件
output指定输出文件，分成两步，路径（path）和文件名（filename）

指定的时候，直接使用相对路径即可。
也可以使用绝对路径，直接利用__dirname，再进行连接就可以。

热更新
在开发的时候，需要来回进行修改代码，然后重新打包，再测试。
这个过程会反复进行，如果每次都手动打包、刷新，效率就比较低了。
需要借助一些 方法，提高开发效率。

在webpac中，本身提供一个监听的功能 webpack -w，就可以自动重新打包。
这种方式，还需要收到刷新页面，一旦文件比较多，每次打包的时间会变长。

有一种更好的解决方案— webpack-dev-server

webpack-dev-server是使用express搭建的一个微型服务器，结合了socket.io可以完成实时的打包和更新。由于这个打包是在内存中进行的，速度极快。

相应的，我们在引入打包文件的时候，需要使用localhost:3000/bundle.js，如下：

一旦开发完毕，就不要热更新了。
再次使用webpack进行打包，生成一个bundle.js，把引入的路径切换回去。

四.Loader-加载器
在开发web项目时，可能会用到一些新的js写法，以及其他的工具（less和sass），这些在浏览器中它是不支持的。此时就需要进行一些转换。
Webpack就提供了loader来实现这些转换。

1.什么是loader
需求：如何在浏览器中es6中的import和export？

新建一个文件Person.js，编写一个类，然后使用export导出，如下：

然后，在app.js中，使用import引入这个类，如下：

执行打包命令，然后在浏览器中浏览，如下：

原因：
当前我们的webpack只是支持 module.exports和require这种Commonjs方式来进行模块化编程。但是对最新的es6中的模块化编程（export和import）并不能直接支持。
所以，我们就需要借助loader来实现。

2.使用babel-loader转换es6
目前，最好用的、最牛的一个就是 – babel。
官网：http://babeljs.io/

所以，这就是loader的作用了

通过使用不同的loader，webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理。如：es6/es7–>es5，jsx–>js

目标，使用babel loader，将我们的es6的语法转成es5，从而在浏览器端可以很好的执行。
分三步：
 安装相应的loader
 增加相应的配置
 执行命令

在webpack.config.js中配置module选项
test：一个匹配loaders所处理的文件扩展名的正则表达式（必须）
loader：loader的名称（必须）
include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）；
query：为loaders提供额外的设置选项（可选）

第一步，安装，
需要安装babel-core、babel-loader、babel-preset-es2015。
其中，babel-core是babel工具的核心，babel-loader是加载器，babel-preset-es2015是真正能够完成将es6转成es5的模块。

第二步，增加配置
在webpack.config.js增加配置
需要先添加一个modules属性
需要配置如下：

第三步，执行命令，进行打包
就可以浏览结果了，如下：

3.使用babel-loader编写react.js
在React.js中，使用了大量的jsx的语法，浏览器本身并不直接支持。也可以利用webapck中的loader。

第一步，安装相应的loader
babel-core、babel-loader、babel-preset-es2015、babel-preset-react
其中babel-preset-es2015可以支持es6的写法，babel-preset-react支持react.js中的jsx写法。

同时，还需要安装react和react-dom

在浏览器中，可以使用react-dom中的方法。

第二步，增加配置

在刚才es6转es5的基础之上，只需要增加一个即可

然后，我们就可以编写react.js代码了。
此时的写法，就类似于在RN中的写法了。

新建一个文件MyComponent.js，如下：

然后 在app.js中， 使用import引入这个组件，并引入react和react-dom

对应的在index.html中，有一个div，如下：

然后，可以打包，浏览，结果如下：

和以前编写React.js的方式做一个对比：

引入js的方式

组织代码的方式

编写代码的语法

支持jsx的语法的方式

很显然，使用es6结合webpack才是我们真正编写项目的方式。

任务：将原来的todo，使用es6重构，再结合weapack打包，完成开发。
4.css loader
在webpack中，认为所有的文件都可以作为模块来使用。
将模块化编程进行到底。
原来，我们所提到的模块化都是针对js文件而言。
现在，在webpack，所有的文件都可以作为模块，比如css、图片、index.html等。
都可以使用 import的方式来使用css、图片和index.html。

每一个都需要有相应的loader来进行支持。

目标：将css作为一个模块来使用。
准备工作，先编写一个css文件，如下：

也就说，现在，使用link标签引入。而改用 import的方式来引用。
只需在 app.js中，使用import引入，如下：

但是，目前没有任何效果。
因为我们还没使用loader来支持这种用法。

使用css loader步骤如下：
第一步，需要安装相应的loader。
npm install --save-dev style-loader css-loader

两者的作用不一样
 css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能,
 style-loader将所有的计算后的样式加入页面中

二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中

第二步，需要在webpack.config.js中增加配置

重新打包，然后在浏览中查看效果如下：

注意：
 在配置loader的时候，用到！，表示使用多个
 style-loader和css-loader是有顺序的，自右往左，先经过css-loader，再经过style-loader。

到底是怎么做到的？
可以查看bundle.js文件如下：

5.css预处理器
在编写css的时候，经常会使用预处理器。
Less、Sass（Scss）、Stylus

使用这些方式编写的代码，并不能直接被浏览器所识别运行。
我们需要将其转换成css，然后再使用。

Webpack有相应的loader — less loader可以完成这个转换过程。

装备工作：编写一个less文件。

目标，将其转成css。

第一步，安装less和less-loader。
npm install --save-dev less-loader less

第二步，增加相应的配置

这里的做法，是将less先编译成css文件，然后将其作为模块来使用。

在app.js中，需要引入这个less文件本身。

注意，不是说会生成新的css文件，而是将结果一起打包bundle.js中。所以，要引入是的less文件本身。

第三步，重新打包，然后浏览，如下：

还有很多很多的loader，其用法大同小异。
基本上都是安装、配置、写代码、打包、浏览的流程。

五.插件
插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
插件可以完成更多 loader 不能完成的功能。

在webpack中，有一些内置的插件，也有一些第三方的插件。

BannerPlugin内置插件的使用

可以在打包的文件中，添加一个版权的说明信息。

查看未使用插件之前的bundle.js，如下：

使用步骤：
第一步，在配置文件中，引入webpack模块
第二步，在配置文件中，添加配置如下：

第三步，重新打包，查看bundle.js，如下：

这就是插件的使用流程。
其他的插件也都是这么一个流程。

六.小结
什么是webpack？
模块打包机，可以完成两项功能：
 实现浏览器端的模块化编程，具体来说，就有可以使用es6中的import和export实现模块化编程。
 可以将所有有依赖关系的文件，进行打包，这个过程中，可以使用大量的loader和插件，完成一些常见的功能。

回头看那一张图：

Webpack和gulp有什么区别？

gulp是一个自动化的构建工具。
webpack是一个模块打包机。

它们两个不能互相替代。

gulp一般是在项目开发完毕之后，进行一系列的优化和处理。
webapck是一直贯穿于整个项目开发过程，提供了浏览器端模块化的解决方案。

近几年，在前端领域，提出了模块化开发和组件化开发
js的模块化是什么意思？
将js文件按照功能进行分离，然后根据需要引入到不同的文件中。
源于服务器端。
在前端开发中，最先出现在node.js中，------ CommonJS（module.exports和require）
随着web应用的规模化，在浏览器端也是需要进行模块化开发。
早期，有AMD和CMD规范，其中的代表require.js和sea.js
随之，在es6中，提出原生模块化的解决方案，就是export和import。但是并没有得到浏览器的完全支持，所以需要借助一些工具 — babel。实现这个转换的有browserify和webpack。

js组件化开发是什么意思？
站在react的角度和bootstrap的角度来看。
所谓的组件化，其实就是将 具备一个完整功能的 html、css和js代码封装到一起，形成一个整体，提供灵活的用法，供其他人使用。
大家经常听到的一个词 — 插件，其实就是组件的形式。

react比较火，
实际上，在开发项目时，react不是一个人在战斗，react技术栈。

React技术栈包括：
 Recat.js
 React Native
 es6语法
 Webpack
 React router
 Redux 状态的保存机制，不是react自己的内容，可以集成到react。