摘要：首先安裝然后在的里面加入和兩個(gè)命令在建立一個(gè)服務(wù)器為你的代碼創(chuàng)建源地址。更新使用語(yǔ)法編寫(xiě)修改加載器的配置方法將添加文件改為在中配置加載器的配置方法接下來(lái)需要配置，告訴我們使用了和插件。

$ git clone https://github.com/nodejh/start-react-with-webpack react-sample
$ cd react-sample && npm install
$ npm run dev

然后打開(kāi)瀏覽器輸入 http://localhost:8080，并嘗試隨意修改一下 app 目錄里面的代碼，就能看到效果了。

為了避免包版本問(wèn)題導(dǎo)致程序不能運(yùn)行，根目錄下有一個(gè) npm-shrinkwrap.json 文件，這里面所有包的版本都是固定的。 npm install 時(shí)首先會(huì)檢查在根目錄下有沒(méi)有 npm-shrinkwrap.json，如果 shrinkwrap 文件存在的話，npm 會(huì)使用它（而不是 package.json）來(lái)確定安裝的各個(gè)包的版本號(hào)信息。

首先創(chuàng)建并初始化一個(gè)項(xiàng)目目錄：

$ mkdir react-sample && cd react-sample
$ npm init

安裝 webpack：

$ npm i webpack --save-dev

然后配置 webpack.config.js：

# 創(chuàng)建一個(gè) webpack.config.js 文件
$ touch webpack.config.js

在該文件中加入下面的內(nèi)容：

const webpack = require("webpack");
const path = require("path");

// 定義打包目錄路徑
const BUILD_DIR = path.resolve(__dirname, "./build");
// 定義組件目錄路徑
const APP_DIR = path.resolve(__dirname, "./app");

const config = {
  entry: `${APP_DIR}/index.jsx`, // 文件打包的入口點(diǎn)
  output: {
    path: BUILD_DIR, // 輸出目錄的絕對(duì)路徑
    filename: "bundle.js", // 輸出的每個(gè)包的相對(duì)路徑
  },
  resolve: {
    extensions: ["", ".js", ".jsx"], // 開(kāi)啟后綴名的自動(dòng)補(bǔ)全
  },
};

module.exports = config;

這是一個(gè)最基本的 webpack 配置文件。

接下來(lái)在 build/ 目錄中創(chuàng)建一個(gè) index.html 文件：

加載器是把一個(gè)資源文件作為入?yún)⑥D(zhuǎn)換為另一個(gè)資源文件的 node.js 函數(shù)。

由于我們寫(xiě) React 的時(shí)候使用的是 JSX 語(yǔ)法和 ES6 語(yǔ)法，而瀏覽器并不完全支持它們。所以需要使用 babel-loader 來(lái)讓 webpack 加載 JSX 和 ES6 的文件。

babel-loader 的主要作用如下圖：

安裝依賴包：

$ npm i babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

babel-preset-es2015 是轉(zhuǎn)換 ES6 的包；babel-preset-react 是轉(zhuǎn)換 JSX 的包。

接下來(lái)需要修改 webpack.config.js：

// Existing Code ....
const config = {
  // Existing Code ....
  module: {
    loaders: [{
      test: /.(js|jsx)$/,
      exclude: /(node_modules|bower_components)/,
      loader: "babel-loader",
      query: {
        presets: ["es2015", "react"]
      }
    }]
  }
};

安裝 React：

$ npm i react react-dom --save

在 app 目錄下新建一個(gè) index.jsx 文件，然后將下面的內(nèi)容添加到 index.jsx 中：

import React from "react";
import {render} from "react-dom";

class App extends React.Component {
  render () {
    return 
 Hello React!
;
  }
}

render(, document.getElementById("app"));

這個(gè)時(shí)候，執(zhí)行下面的命令打包：

webpack -w

-w 參數(shù)表示持續(xù)監(jiān)測(cè)項(xiàng)目目錄，如果文件發(fā)生修改，則重新打包。

打包完成后，將 build/index.html 用瀏覽器打開(kāi)，就能看到 Hello React!，如下：

懶是第一生產(chǎn)力。每次寫(xiě)完代碼，都要重新打包，重新刷新瀏覽器才能看到結(jié)果，顯然很麻煩。

那有沒(méi)有能夠自動(dòng)刷新瀏覽器的方法呢？當(dāng)然有，這個(gè)時(shí)候就需要 webpack-dev-server 這個(gè)包。

$ npm install webpack-dev-server -g

webpack-dev-server 提供了兩種自動(dòng)刷新模式：

Iframe 模式

不需要額外配置，只用修改路徑

應(yīng)用被嵌入了一個(gè) iframe 內(nèi)部，頁(yè)面頂部可以展示打包進(jìn)度信息

因?yàn)?Iframe 的關(guān)系，如果應(yīng)用有多個(gè)頁(yè)面，無(wú)法看到當(dāng)前頁(yè)面的 URL 信息

inline 模式

需要添加 --inline 配置參數(shù)

提示信息在控制臺(tái)中和瀏覽器的console中顯示

頁(yè)面的 URL 改變，可以在瀏覽器地址欄看見(jiàn)

接下來(lái)啟動(dòng) webpack-dev-server：

$ webpack-dev-server --inline --hot --content-base ./build/

--hot 參數(shù)就是熱加載，即在不刷新瀏覽器的條件下，應(yīng)用最新的代碼更新。在瀏覽器中可能看到這樣的輸出：

[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.

--content-base ./ 參數(shù)表示將當(dāng)前目錄作為 server 根目錄。命令啟動(dòng)后，會(huì)在 8080 端口創(chuàng)建一個(gè) HTTP 服務(wù)，通過(guò)訪問(wèn) http://localhost:8080/index.html 就可以訪問(wèn)我們的項(xiàng)目了，并且修改了項(xiàng)目中的代碼后，瀏覽器會(huì)自動(dòng)刷新并實(shí)現(xiàn)熱加載。

當(dāng)然，命令行輸入這么長(zhǎng)，還是不太方便，所以還有一種更簡(jiǎn)單的方式，在 package.json 中配置 webpack develop server：

// Existing Code ....
"scripts": {
    "dev": "webpack-dev-server --inline --hot --content-base ./build/"
  }

然后通過(guò) npm start dev 來(lái)啟動(dòng)即可。

在 app 目錄中新建一個(gè) AwesomeComponent.jsx 文件，并添加如下代碼：

import React, { Component } from "react";

class AwesomeComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      likesCount: 0
    };
    this.onLike = this.onLike.bind(this);
  }


  onLike() {
    let newLikesCount = this.state.likesCount + 1;
    this.setState({
      likesCount: newLikesCount
    });
  }


  render() {
    return (
      

        Likes: {this.state.likesCount}
        

          Like Me
        
      
    );
  }
}


export default AwesomeComponent;

然后修改 index.jsx：

// ...
import AwesomeComponent from "./AwesomeComponent.jsx";
// ...
class App extends React.Component {
  render () {
    return (
      

        
 Hello React!
        
      
    );
  }
}

// ...

更新 webpack-dev-server 的配置方法

設(shè)置 webpack-dev-server (old)

上面我們直接通過(guò)瀏覽器瀏覽的 html 文件，接下來(lái)我們需要利用 webpack-dev-server 來(lái)創(chuàng)建一個(gè) HTTP Server。

首先安裝 webpack-dev-server：

$ npm i webpack-dev-server --save-dev

然后在 package.json 的 script 里面加入 build 和 dev 兩個(gè)命令：

{
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
  }
}

webpack-dev-server - 在 localhost:8080 建立一個(gè) Web 服務(wù)器

--devtool eval - 為你的代碼創(chuàng)建源地址。當(dāng)有任何報(bào)錯(cuò)的時(shí)候可以讓你更加精確地定位到文件和行號(hào)

--progress - 顯示合并代碼進(jìn)度

--colors - 命令行中顯示顏色！

--content-base build - 指向設(shè)置的輸出目錄

然后就可以使用 npm run dev 的命令來(lái)啟動(dòng)項(xiàng)目：

$ npm run dev

在瀏覽器地址欄輸入 localhost:8080 即可看到頁(yè)面。

如果需要瀏覽器自動(dòng)刷新，將 webpack.config.js 中的 entry: APP_DIR + "/index.jsx 改為下面這樣：

entry: [
   "webpack-dev-server/client?http://localhost:8080",
   "webpack/hot/dev-server",
    APP_DIR + "/index.jsx"
]

這樣的話，每次當(dāng)代碼發(fā)生變化之后，webpack 會(huì)自動(dòng)重新打包，瀏覽器也會(huì)自動(dòng)刷新頁(yè)面。

使用 ES6 語(yǔ)法編寫(xiě) webpack.config.js

修改 babel-loader 加載器的配置方法：將添加 .babelrc 文件改為在 webpack.config.js 中配置

?：webpack-dev-server --inline --hot --content-base ./build/ ?? webpack-dev-server --inline --hot --content-base ./build/

babel-loader 加載器的配置方法(old)

接下來(lái)需要配置 babel-loader，告訴 webpack 我們使用了 ES6 和 JSX 插件。先通過(guò)touch .babelrc 創(chuàng)建一個(gè)名為 .babelrc 的配置文件。然后加入下面的代碼：

{
  "presets" : ["es2015", "react"]
}

然后再修改 webpack.config.js，使 webpack 在打包的時(shí)候，使用 babel-loader：

// Existing Code ....
var config = {
  // Existing Code ....
  module: {
    loaders : [
      {
        test : /.jsx?/,
        include : APP_DIR,
        loader : "babel"
      }
    ]
  }
}

自動(dòng)刷新和熱加在的配置(old, wrong)

當(dāng)然，命令行輸入這么長(zhǎng)，還是不太方便，所以還有一種更簡(jiǎn)單的方式，直接在 webpack.cofig.js 中配置 webpack develop server：

{
  entry: {
    // ...
  },
  // ...
  devServer: {
    hot: true,
    inline: true
  }
}

Github Issue: https://github.com/nodejh/nodejh.github.io/issues/12