webpack

新建一个webpack的项目

npm i -s webpack webpack-dev-server babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0

webpack和webpack-dev-server分别是webpack打包工具和一个开发服务器
babel是一个js编译器（js也有编译器了...）
babel-loader用于加载我们的各类资源；
babel-preset-es2015让我们可以在项目中使用es2015；
babel-preset-react负责把react中的jsx代码转换为createElement的调用；
babel-preset-stage-0是ES7不同阶段语法提案的转码规则中的一个。
创建webpack.config.js文件

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/app.js",
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "app.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

entry是前端build的入口文件，context可以被require的路径，output为输出路径和文件名。我们用debug变量来区分开发环境和生产环境。在生产环境中，我们要压缩我们的输出文件。下面我们创建src/js/app.js

// app.js
const test = () => {console.log("hello")}
test()

分别尝试以下命令

webpack
NODE_ENV=production webpack

react

npm i -s react react-dom

下面我们创建一个最简单的app

创建我们的第一个组件

import React from 'react'

export default class Layout extends React.Component{
  render(){
    return (
      
Hello webpack
    )
  }
}

使用组件

import React from "react"
import ReactDOM from "react-dom"
import App from "./Components/Layout"

const app = document.getElementById('app')
ReactDOM.render(, app);

编译并查看结果

webpack
open src/index.html

配置webpack-dev-server

我们可以使用npm scripts，在package.json的scripts中加入下面代码。

"dev": "webpack-dev-server --port 9000 --inline --content-base src",

运行

npm run dev

打开localhost:9000,可以看到结果，尝试修改Layout.js，浏览器立即发生变化。

import css

npm install style-loader css-loader --save-dev

然后创建文件src/css/main.css

h2 {
  color: red;
}

在webpack的配置文件中，我们加入css文件的loader

{ test: /\.css$/, loaders: ['style', 'css'] }

重启npm run dev。下面可以修改app.js，在其中引入css文件

import '../css/main.css'

too easy!

import Image/url

插入图片现在也变得超级酷了

npm i -s file-loader url-loader

修改webpack.config.js并重启

{ test: /\.png$/, loader: "file-loader?mimetype=image/png" }

修改Layout.js

import React from 'react'
import url from '../../images/pic.png'

export default class Layout extends React.Component{
  render(){
    return(
      

      
Hello webpack again
      
      
    )
  }
}

插件

npm i -s babel-plugin-react-html-attrs babel-plugin-transform-class-properties babel-plugin-transform-decorators-legacy

react-html-attrs复制在编译js的时候，把class转成className，把for转成htmlFor
transform-class-properties用于转换class
transform-decorators-legacy 负责兼容babel5和babel6
把这三个插件插入js的loader中

loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
        }
      },
      { test: /\.css$/, loaders: ['style', 'css'] },
      { test: /\.png$/, loader: "file-loader?mimetype=image/png" }
    ]