webpack+babel+react操作小结

最近学习了一下Webpack，个人感觉还是非常实用的，现在总结一下自己的学习笔记。

什么是 Webpack

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

Webpack 的特点

1、代码拆分

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

2、Loader

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

3、智能解析

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

4、插件系统

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

快速运行

安装nodejs

https://nodejs.org/en/ 

安装npm (NodeJS包管理和分发工具)

http://npmjs.org/

  npm常用命令
  npm init 创建package.json文件
  npm install <module-name> -g/--save-dev/--save  安装模块
  npm update <module-name >  更新模块
  npm uninstall <module-name > 卸载模块

安装webpack

用 npm 安装 Webpack
        npm install webpack -g
        安装后就在命令行中使用 webpack命令
把依赖写入 package.json
        npm install webpack --save-dev

webpack命令

打包命令 webpack app.js output.js
        app.js       打包的入口文件
        output.js    打包后的文件

模块加载器（loader）

各种不同文件类型的资源, Webpack 有对应的模块 loader
    安装加载器
        npm install xxx-loader --save-dev
        例如：css-loader style-loader  处理css文件和样式
    更多参考：
        http://webpack.github.io/docs/using-loaders.html

webpack的配置项说明

     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”]  //自动补全识别后缀
    }

webpack-dev-server

轻量级的服务器
修改文件源码后，自动刷新页面就能把修改同步到页面上

安装webpack-dev-server

           npm install webpack-dev-server  -g
安装后在命令行中使用 webpack-dev-server命令
把依赖写入 package.json
            npm install webpack-dev-server  --save-dev
使用命令 webpack-dev-server --hot --inline 做到自动刷新

在webpack.config.js中配置服务

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

自动生成html文件

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

 使用

在webpack.config.js中引入
    var htmlWebpackPlugin = require('html-webpack-plugin');
    

在plugins中配置

    plugins:[
        new htmlWebpackPlugin({
            title:"My first react app",
            chunks:[“index”]
        })
    ]

         babel作用

将ES6代码转为ES5代码   
 
官网：http://babeljs.io/

安装babel-cli

        npm install babel-cli -g
安装后就在命令行中使用 babel 命令
把依赖写入 package.json
        npm install babel-cli --save-dev
转换命令：babel app.js --out-file build.js

使用es2015 

       npm install --save-dev babel-preset-es2015
在目录下创建.babelrc文件，设置为
      {"presets": ["es2015"]}

安装babel-loader加载器

使用webpack处理文件中ec6语法
在webpack.config.js中加入对应的处理
        {
            test: /\.js$/
            loader：'babel',
            query:['es2015']
        }

安装react模块

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")