React.js入門基礎(chǔ)與案例開發(fā) by ParryKK in imooc.com 學(xué)習(xí)筆記

npm 項(xiàng)目初始化

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

創(chuàng)建 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",                 // 進(jìn)入路徑
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  },
  output: {
    path: __dirname,
    filename: "./src/bundle.js"           // 生成打包文件
  }
};

打包命令

webpack

自動(dòng)打包

webpack --watch         

項(xiàng)目熱加載

• webpack-dev-server --contentbase src

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

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