React 配置

React.js入门基础与案例开发 by ParryKK in imooc.com 学习笔记

npm 项目初始化

npm init

React 依赖包安装

npm install --save react react-dom babelify babel-preset-react
npm install --save babel-preset-es2015

{
  "babel-preset-es2015": "^6.14.0",
  "babel-preset-react": "^6.11.1",
  "babelify": "^7.3.0",
  "react": "^15.3.2",
  "react-dom": "^15.3.2",
}

webpack 热加载配置

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

{
  "babel-loader": "6.2.5",
  "webpack": "^1.13.2",
  "webpack-dev-server": "^1.16.1"
}

创建 webpack.config.js 文件

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

module.exports = {
  context: __dirname + '/src',
  entry: "./js/index.js",                 // 进入路径
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  },
  output: {
    path: __dirname,
    filename: "./src/bundle.js"           // 生成打包文件
  }
};

打包命令

webpack

自动打包

webpack --watch         

项目热加载

• webpack-dev-server --contentbase src

  • http://localhost:8080/webpack-dev-server/

• webpack-dev-server --contentbase src --inline --hot
  • http://localhost:8080/
  • 去除头部