Webpack

Webpack是一个模块打包器。每一个应用可能包含多个JS文件，JS文件之间又有依赖关系。JS文件的加载需按一定的顺序。Webpack 读取和分析入口文件和他的所有依赖，将入口文件和他的所有依赖的文件打包成一个可以识别的JS文件。

1、用NPM 发装WebPack

命令： npm install  --save-dev webpack，在项目目录安装webpack，并修改了NPM 的配置文件package.json

修改后的package.json

2、使用方法

 webpack  入口文件  打包后的文件。

如 a.js 依赖b.js , 用webpack 打包后生成 bundle.js文件。命令 webpack a.js  bundle.js

webpack会将a.js 和 b.js 一并打包到bundle.js.

3、配置文件webpack.config.js

最简单的配置文件

4、loader

webpack本身只支持JS模块，但可以通过各种loader来处理各种格式的文件。如Type Script,JSON等格式的文件转换成JS格式，一并打包。

配置文件：

增加JSON loader的配置

5、Plugins

插件（Plugins）是用来拓展Webpack功能。如HtmlWebpackPlugin，用于生成HTML5文件。

a)安装：npm install   --save-dev  html-webpack-plugin

b)修改webpack.config.js配置

plugins: [ new HtmlWebpackPlugin({   template:‘src/index.html’})  ]