Webpack

## webpack (运行在 node 环境)

* 浏览器 只认识 img css js html html5 css3 

  grunt 早 没人用了

  gulp 很少一部分人用

  webpack 1 2, 3, 4, 5: 大部分

  1. 
  jsx async @ => 转化 ecma5 
  less sass => 转成 css

  2. 压缩

  3. img < 5K => 自动转成 Base64

* 配置文件 webpack.config.js

* 入口 出口 loader 插件 模式

* 入口: 整个项目入口

* 出口: webpck 打包后的文件放在哪

* loader: 把文件解析成浏览器可读的格式
  babel-loader: jsx e6 e7 -> e5
  leass-loader: less -> css

* webpack webpack-cli 这2必须都装

解析index.jsx

import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(
  <div>小花</div>,
  document.getElementById('root')
)

在 webpack.config.js

const webpack = require('webpack')
const path = require('path')

module.exports = {
  // 入口
  entry: {
    index: './index.js',
  },

  // 出口
  output: {
    // 打包后的文件名
    filename: 'xsa.js',
    // 打包后的目录
    path: path.join(__dirname, './dist'),
  },
  module: {
    rules: [
      {
        // test 属性 识别出哪些文件会被转换
        test: /\.jsx?$/,
        // node_modules 里文件不转换
        exclude: /node_modules/,
        // 定义出在进行转换时 应该使用哪个 loader
        use: {
          loader: 'babel-loader'
        }
      },
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      // beautify
      //  true: 美化代码输出
      //  false: 压缩代码 会删除部分注释 
      beautify: false,
      // comments
      //  true: 保留所有注释
      //  false: 删除所有注释
      comments: false
    })
  ]
}

执行webpack 产生一个dist文件夹
在html里引用就行