Start React with Webpack

02-01

TL;DR

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

然後打開瀏覽器輸入 http://localhost:8080，並嘗試隨意修改一下 app 目錄裡面的代碼，就能看到效果了。

為了避免包版本問題導致程序不能運行，根目錄下有一個 npm-shrinkwrap.json 文件，這裡面所有包的版本都是固定的。 npm install 時首先會檢查在根目錄下有沒有 npm-shrinkwrap.json，如果 shrinkwrap 文件存在的話，npm 會使用它（而不是 package.json）來確定安裝的各個包的版本號信息。

1. 安裝並配置 Webpack

首先創建並初始化一個項目目錄：

$ mkdir react-sample && cd react-samplen$ npm initn

安裝 webpack：

$ npm i webpack --save-devn

然後配置 webpack.config.js：

# 創建一個 webpack.config.js 文件n$ touch webpack.config.jsn

在該文件中加入下面的內容：

這是一個最基本的 webpack 配置文件。

接下來在 build/ 目錄中創建一個 index.html 文件：

<html>n <head>n <meta charset="utf-8">n <title>Start React with Webpack</title>n </head>n <body>n <div id="app" />n <script type="text/javascript" src="./bundle.js"></script>n </body>n</html>n

2. 配置載入器 babel-loader

載入器是把一個資源文件作為入參轉換為另一個資源文件的 node.js 函數。

由於我們寫 React 的時候使用的是 JSX 語法和 ES6 語法，而瀏覽器並不完全支持它們。所以需要使用 babel-loader 來讓 webpack 載入 JSX 和 ES6 的文件。

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

安裝依賴包：

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

babel-preset-es2015 是轉換 ES6 的包；babel-preset-react 是轉換 JSX 的包。

接下來需要修改 webpack.config.js：

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

3. Hello React

安裝 React：

$ npm i react react-dom --saven

在 app 目錄下新建一個 index.jsx 文件，然後將下面的內容添加到 index.jsx 中：

import React from react;nimport {render} from react-dom;nnclass App extends React.Component {n render () {n return <h1> Hello React!</h1>;n }n}nnrender(<App/>, document.getElementById(app));n

這個時候，執行下面的命令打包：

webpack -wn

-w 參數表示持續監測項目目錄，如果文件發生修改，則重新打包。

打包完成後，將 build/index.html 用瀏覽器打開，就能看到 Hello React!，如下：

4. 自動刷新和熱載入

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

那有沒有能夠自動刷新瀏覽器的方法呢？當然有，這個時候就需要 webpack-dev-server 這個包。

$ npm install webpack-dev-server -gn

webpack-dev-server 提供了兩種自動刷新模式：

Iframe 模式

不需要額外配置，只用修改路徑
應用被嵌入了一個 iframe 內部，頁面頂部可以展示打包進度信息
因為 Iframe 的關係，如果應用有多個頁面，無法看到當前頁面的 URL 信息

inline 模式

需要添加 –inline 配置參數
提示信息在控制台中和瀏覽器的console中顯示
頁面的 URL 改變，可以在瀏覽器地址欄看見

接下來啟動 webpack-dev-server：

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

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

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

--content-base ./ 參數表示將當前目錄作為 server 根目錄。命令啟動後，會在 8080 埠創建一個 HTTP 服務，通過訪問 http://localhost:8080/index.html 就可以訪問我們的項目了，並且修改了項目中的代碼後，瀏覽器會自動刷新並實現熱載入。

當然，命令行輸入這麼長，還是不太方便，所以還有一種更簡單的方式，在 package.json 中配置 webpack develop server：

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

然後通過 npm start dev 來啟動即可。

5. 添加一個新的組件

在 app 目錄中新建一個 AwesomeComponent.jsx 文件，並添加如下代碼：

import React, { Component } from react;nnclass AwesomeComponent extends Component {n constructor(props) {n super(props);n this.state = {n likesCount: 0n };n this.onLike = this.onLike.bind(this);n }nnn onLike() {n let newLikesCount = this.state.likesCount + 1;n this.setState({n likesCount: newLikesCountn });n }nnn render() {n return (n <div>n Likes: <span>{this.state.likesCount}</span>n <div>n <button onClick={this.onLike}>Like Me</button>n </div>n </div>n );n }n}nnnexport default AwesomeComponent;n

然後修改 index.jsx：

// ...nimport AwesomeComponent from ./AwesomeComponent.jsx;n// ...nclass App extends React.Component {n render () {n return (n <div>n <p> Hello React!</p>n <AwesomeComponent />n </div>n );n }n}nn// ...n

完。