Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资

1、代码拆分

Webpack 有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。

2、Loader

Webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。

3、智能解析

Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候，允许使用动态表达式 require("./templates/" + name + ".jade")。

4、插件系统

Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的 Webpack 插件，来满足各式各样的需求。

快速运行

https://nodejs.org/en/ 

http://npmjs.org/

  npm常用命令

  npm init 创建package.json文件

  npm install <module-name> -g/--save-dev/--save  安装模块

  npm update <module-name >  更新模块

  npm uninstall <module-name > 卸载模块

用 npm 安装 Webpack

        npm install webpack -g

        安装后就在命令行中使用 webpack命令

把依赖写入 package.json

        npm install webpack --save-dev

打包命令 webpack app.js output.js

        app.js       打包的入口文件

        output.js    打包后的文件

各种不同文件类型的资源, Webpack 有对应的模块 loader

    安装加载器

        npm install xxx-loader --save-dev

        例如：css-loader style-loader  处理css文件和样式

    更多参考：
http://webpack.github.io/docs/using-loaders.html

     entry：     打包的入口文件  String|Object

    output：     配置打包结果     Object

      path：     定义输出文件路径

  filename：     指定打包文件名称

    module：     定义了对模块的处理逻辑     Object

   loaders：     定义了一系列的加载器   Array

            [{

                    test: 正则，匹配到的文件后缀名

                    loader/loaders：string|array，处理匹配到的文件

                    include：String|Array  包含的文件夹

                    exclude：String|Array  排除的文件夹

            }]

    resolve:{

        extensions:['','.js',".css",“jsx”]  //自动补全识别后缀

    }

轻量级的服务器

修改文件源码后，自动刷新页面就能把修改同步到页面上

           npm install webpack-dev-server  -g

安装后在命令行中使用 webpack-dev-server命令

把依赖写入 package.json

            npm install webpack-dev-server  --save-dev

使用命令 webpack-dev-server --hot --inline 做到自动刷新

devServer: {    }

参考：http://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option

安装  npm install html-webpack-plugin --save-dev

在webpack.config.js中引入

    var htmlWebpackPlugin = require('html-webpack-plugin');
    

    plugins:[

        new htmlWebpackPlugin({

            title:"My first react app",

            chunks:[“index”]

        })

    ]

将ES6代码转为ES5代码   


官网：http://babeljs.io/

        npm install babel-cli -g

安装后就在命令行中使用 babel 命令

把依赖写入 package.json

        npm install babel-cli --save-dev

转换命令：babel app.js --out-file build.js

       npm install --save-dev babel-preset-es2015

在目录下创建.babelrc文件，设置为

      {"presets": ["es2015"]}

使用webpack处理文件中ec6语法

在webpack.config.js中加入对应的处理

        {

            test: /\.js$/

            loader：'babel',

            query:['es2015']

        }

npm install react react-dom babel-preset-react --save-dev

{"presets": ["es2015","react"]}

      npm install react-hot-loader --save-dev

在loader中修改为：

     loaders: ['react-hot','babel?presets[]=es2015&presets[]=react']

     include:path.resolve(__dirname,"react")