轉自http://www.jianshu.com/p/4df92c335617

其他參考：

http://blog.csdn.net/mafan121/article/details/71211922

http://lib.csdn.net/article/24/41556?knId=689

http://www.ruanyifeng.com/blog/2015/03/react.html

http://www.cnblogs.com/marymei0107/p/6118524.html

http://blog.csdn.net/vichou_fa/article/details/54172928

webstorm 2017 激活破解

http://blog.csdn.net/it_talk/article/details/52448597

2017-06-15更新
之前都是使用2017.2.27的方法，版本是2017.1.1，還沒提示過期，但是根據評論說這個鏈接已經失效了，評論也給出了個新地址：http://idea.iteblog.com/key.php
感謝 @qq_35381272 友情提供
2017.2.27更新
選擇“license server” 輸入：http://idea.imsxm.com/ 我使用的這個
2016.2.2 版本的破解方式：
安裝以後，打開軟件會彈出一個對話框；選擇“license server” 輸入：http://114.215.133.70:41017
2016.2.3 版本的破解方式：
目前最新的就是2.3版本，在打開的License Activation窗口中選擇“activation code”，在輸入框輸入下面的註冊碼

43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0I0QTczWVlKIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiIiwiYXNzaWduZWVFbWFpbCI6IiIsImxpY2Vuc2VSZXN0cmljdGlvbiI6IkZvciBlZHVjYXRpb25hbCB1c2Ugb25seSIsImNoZWNrQ29uY3VycmVudFVzZSI6ZmFsc2UsInByb2R1Y3RzIjpbeyJjb2RlIjoiSUkiLCJwYWlkVXBUbyI6IjIwMTctMDItMjUifSx7ImNvZGUiOiJBQyIsInBhaWRVcFRvIjoiMjAxNy0wMi0yNSJ9LHsiY29kZSI6IkRQTiIsInBhaWRVcFRvIjoiMjAxNy0wMi0yNSJ9LHsiY29kZSI6IlBTIiwicGFpZFVwVG8iOiIyMDE3LTAyLTI1In0seyJjb2RlIjoiRE0iLCJwYWlkVXBUbyI6IjIwMTctMDItMjUifSx7ImNvZGUiOiJDTCIsInBhaWRVcFRvIjoiMjAxNy0wMi0yNSJ9LHsiY29kZSI6IlJTMCIsInBhaWRVcFRvIjoiMjAxNy0wMi0yNSJ9LHsiY29kZSI6IlJDIiwicGFpZFVwVG8iOiIyMDE3LTAyLTI1In0seyJjb2RlIjoiUEMiLCJwYWlkVXBUbyI6IjIwMTctMDItMjUifSx7ImNvZGUiOiJSTSIsInBhaWRVcFRvIjoiMjAxNy0wMi0yNSJ9LHsiY29kZSI6IldTIiwicGFpZFVwVG8iOiIyMDE3LTAyLTI1In0seyJjb2RlIjoiREIiLCJwYWlkVXBUbyI6IjIwMTctMDItMjUifSx7ImNvZGUiOiJEQyIsInBhaWRVcFRvIjoiMjAxNy0wMi0yNSJ9XSwiaGFzaCI6IjMzOTgyOTkvMCIsImdyYWNlUGVyaW9kRGF5cyI6MCwiYXV0b1Byb2xvbmdhdGVkIjpmYWxzZSwiaXNBdXRvUHJvbG9uZ2F0ZWQiOmZhbHNlfQ==-keaxIkRgXPKE4BR/ZTs7s7UkP92LBxRe57HvWamu1EHVXTcV1B4f/KNQIrpOpN6dgpjig5eMVMPmo7yMPl+bmwQ8pTZaCGFuLqCHD1ngo6ywHKIQy0nR249sAUVaCl2wGJwaO4JeOh1opUx8chzSBVRZBMz0/MGyygi7duYAff9JQqfH3p/BhDTNM8eKl6z5tnneZ8ZG5bG1XvqFTqWk4FhGsEWdK7B+He44hPjBxKQl2gmZAodb6g9YxfTHhVRKQY5hQ7KPXNvh3ikerHkoaL5apgsVBZJOTDE2KdYTnGLmqxghFx6L0ofqKI6hMr48ergMyflDk6wLNGWJvYHLWw==-MIIEPjCCAiagAwIBAgIBBTANBgkqhkiG9w0BAQsFADAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENBMB4XDTE1MTEwMjA4MjE0OFoXDTE4MTEwMTA4MjE0OFowETEPMA0GA1UEAwwGcHJvZDN5MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxcQkq+zdxlR2mmRYBPzGbUNdMN6OaXiXzxIWtMEkrJMO/5oUfQJbLLuMSMK0QHFmaI37WShyxZcfRCidwXjot4zmNBKnlyHodDij/78TmVqFl8nOeD5+07B8VEaIu7c3E1N+e1doC6wht4I4+IEmtsPAdoaj5WCQVQbrI8KeT8M9VcBIWX7fD0fhexfg3ZRt0xqwMcXGNp3DdJHiO0rCdU+Itv7EmtnSVq9jBG1usMSFvMowR25mju2JcPFp1+I4ZI+FqgR8gyG8oiNDyNEoAbsR3lOpI7grUYSvkB/xVy/VoklPCK2h0f0GJxFjnye8NT1PAywoyl7RmiAVRE/EKwIDAQABo4GZMIGWMAkGA1UdEwQCMAAwHQYDVR0OBBYEFGEpG9oZGcfLMGNBkY7SgHiMGgTcMEgGA1UdIwRBMD+AFKOetkhnQhI2Qb1t4Lm0oFKLl/GzoRykGjAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENBggkA0myxg7KDeeEwEwYDVR0lBAwwCgYIKwYBBQUHAwEwCwYDVR0PBAQDAgWgMA0GCSqGSIb3DQEBCwUAA4ICAQC9WZuYgQedSuOc5TOUSrRigMw4/+wuC5EtZBfvdl4HT/8vzMW/oUlIP4YCvA0XKyBaCJ2iX+ZCDKoPfiYXiaSiH+HxAPV6J79vvouxKrWg2XV6ShFtPLP+0gPdGq3x9R3+kJbmAm8w+FOdlWqAfJrLvpzMGNeDU14YGXiZ9bVzmIQbwrBA+c/F4tlK/DV07dsNExihqFoibnqDiVNTGombaU2dDup2gwKdL81ua8EIcGNExHe82kjF4zwfadHk3bQVvbfdAwxcDy4xBjs3L4raPLU3yenSzr/OEur1+jfOxnQSmEcMXKXgrAQ9U55gwjcOFKrgOxEdek/Sk1VfOjvS+nuM4eyEruFMfaZHzoQiuw4IqgGc45ohFH0UUyjYcuFxxDSU9lMCv8qdHKm+wnPRb0l9l5vXsCBDuhAGYD6ss+Ga+aDY6f/qXZuUCEUOH3QUNbbCUlviSz6+GiRnt1kA9N2Qachl+2yBfaqUqr8h7Z2gsx5LcIf5kYNsqJ0GavXTVyWh7PYiKX4bs354ZQLUwwa/cG++2+wNWP+HtBhVxMRNTdVhSm38AknZlD+PTAsWGu9GyLmhti2EnVwGybSD2Dxmhxk3IPCkhKAK+pl0eWYGZWG3tJ9mZ7SowcXLWDFAk0lRJnKGFMTggrWjV8GYpw5bq23VmIqqDLgkNzuoog==

備註：資料來源網上

20170315更新

由於webpack已更新至2.0版本，許多配置項都已改變，所以可能本文有些項已經過時了

推薦大家使用facebook官方構建工具facebookincubator/create-react-app來創建React基礎工程

因爲webpack的配置太複雜了，我們沒有必要全部瞭解，它就是個工具，說不定哪天又變成別的工具了。真正需要明白的是它的原理，剩餘的東西，對着文檔來或者用別人做好的輪子就行，把時間花在真正值得花的地方。

前言

隨着前端代碼越來越多，越來越複雜，整個工程變得越來越難以管理。所以，前端工程化已是必然的趨勢，已經是2016年了，還在用手動添加依賴嗎？快來學習用構建工具來管理web項目吧。

就像是Android工程使用gradle來進行項目構建一樣，在前端世界裏，現在最流行的工具就是webpack。

而現在最流行的前端框架，分別是Google的Angular.js，Facebook的React.js，還有我們國人自己的尤雨溪大神的Vue.js。因爲最近Angular和Vue發佈了2.0版本，區別較大，所以推薦學習更爲穩定的React.js。

自己是閱讀了以下兩篇文章：

入門Webpack，看這篇就夠了
 React+Webpack快速上手指南

兩篇文章寫的非常好，但中間還是有些地方不是很清楚，需要結合起來看，所以寫下這篇文章，總結自己實際開發中遇到的坑。樂於分享，收穫更多。

開發環境

推薦使用JetBrain的Webstorm，有強大的代碼提示，支持JSX和ES6語法；可以試用一個月，相對於開發效率的巨大提升，一年300塊真的不算太貴。

我們將會使用npm來下載和構建依賴，需要提前安裝node.js，如果沒有安裝可以參考這篇文章安裝node.js和npm

使用npm時需要將終端定位到項目的根目錄下

React作爲Facebook全家桶的老大哥，今後肯定會使用Facebook新出的開源依賴工具Yarn，推薦好奇的同學們去試（cai）試（keng）。我們還是先使用穩定的npm，畢竟依賴工具只是輔助，以後可以遷移到yarn上，重要的是代碼。

源碼地址：https://github.com/BadWaka/ReactDemo_webpack
如果覺得有幫助，點個Star唄

讓我們開始吧

項目結構

新建一個新項目，命名爲ReactDemo，將項目目錄組織如下：

其中app是開發目錄
- components用來放React的組件
  - Component1.jsx是React特有的jsx文件
- main.js是入口文件，用來將React組件放在真正的Html中
build是輸出目錄
- index.html是最終要呈現的頁面文件，代碼如下
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ReactDemo1</title>
</head>
<body>

<div id="content"></div>

<script src="bundle.js"></script>
</body>
</html>
```
- bundle.js是app文件夾下的文件經webpack打包後最終生成的供瀏覽器解析的js文件，這個不需要手動進行配置，甚至你不需要新建它，由webpack自動生成。

創建package.json文件

package.json是一個標準的npm說明文件，裏面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務等；

在工程根目錄打開命令行（win10中使用ctrl+shift+右鍵可以在菜單中看到"在此處打開命令窗口"的選項），輸入npm init可以自動創建package.json文件；

輸入命令後，終端會問用戶一系列的問題，如果不需要在npm中發佈你的模塊，一路回車默認即可（注意：name需要小寫）；

確認後輸入yes即可看到package.json文件創建完成

安裝webpack

//全局安裝webpack，優點是打包時可以直接輸webpack命令
npm install -g webpack

//在本項目中安裝webpack，--save-dev的意思是將依賴寫入項目的package.json文件
npm install --save-dev webpack

在命令行中輸入npm install --save-dev webpack，在本項目中安裝webpack作爲依賴包

如上圖所示則代表安裝成功

創建webpack.config.js

文／zhangwang（簡書作者）
原文鏈接：http://www.jianshu.com/p/42e11515c10f

Webpack擁有很多其它的比較高級的功能（比如說本文後面會介紹的loaders和plugins），這些功能其實都可以通過命令行模式實現，但是正如已經提到的，這樣不太方便且容易出錯的，一個更好的辦法是定義一個配置文件，這個配置文件其實也是一個簡單的JavaScript模塊，可以把所有的與構建相關的信息放在裏面。

webpack.config.js是webpack的配置文件
在項目的根目錄下新建一個webpack.config.js的文件，代碼如下：

//__dirname是node.js中的一個全局變量，它指向當前執行腳本所在的目錄
module.exports = {//注意這裏是exports不是export
    entry: __dirname + "/app/main.js",//唯一入口文件，就像Java中的main方法
    output: {//輸出目錄
        path: __dirname + "/build",//打包後的js文件存放的地方
        filename: "bundle.js"//打包後的js文件名
    }
};

這時候已經可以使用webpack進行打包了
在命令行下輸入webpack(非全局安裝需使用node_modules/.bin/webpack

看到以上提示說明打包成功了，可以看到build目錄下的bundle.js裏多了很多自動生成的代碼，但預覽index.html卻什麼都沒有看到，這是因爲還沒有往頁面中寫入內容。

更方便的執行打包任務

文／zhangwang（簡書作者）
原文鏈接：http://www.jianshu.com/p/42e11515c10f

執行類似於node_modules/.bin/webpack這樣的命令其實是比較煩人且容易出錯的，不過值得慶幸的是npm可以引導任務執行，對其進行配置後可以使用簡單的npm start命令來代替這些繁瑣的命令。在package.json中對npm的腳本部分進行相關設置即可，設置方法如下。

//package.json
{
  "name": "react_demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {//默認的test直接刪除即可
    "start": "webpack"//配置的地方就是這裏，相當於把npm的start命令指向webpack命令；注意：實際代碼中這裏不能加註釋，否則會報錯
  },
  "author": "waka",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^1.13.2"
  }
}

注：package.json中的腳本部分已經默認在命令前添加了node_modules/.bin
路徑，所以無論是全局還是局部安裝的Webpack，你都不需要寫前面那指明詳細的路徑了。

npm的start是一個特殊的腳本名稱，它的特殊性表現在，在命令行中使用npm start就可以執行相關命令，如果對應的此腳本名稱不是start，想要在命令行中運行時，需要這樣用npm run {script name}如npm run build，以下是執行npm start後命令行的輸出顯示：

以後直接輸入npm start就可以進行打包操作了

使用Source Maps，使調試更容易

文／zhangwang（簡書作者）
原文鏈接：http://www.jianshu.com/p/42e11515c10f

開發總是離不開調試，如果可以更加方便的調試當然就能提高開發效率，不過打包後的文件有時候你是不容易找到出錯了的地方對應的源代碼的位置的，Source Maps就是來幫我們解決這個問題的。
通過簡單的配置後，Webpack在打包時可以爲我們生成的source maps，這爲我們提供了一種對應編譯文件和源文件的方法，使得編譯後的代碼可讀性更高，也更容易調試。

在webpack的配置文件中配置source maps，需要配置devtool，它有以下四種不同的配置選項，各具優缺點，描述如下：

devtool選項	配置結果
source-map	在一個單獨的文件中產生一個完整且功能完全的文件。這個文件具有最好的source map，但是它會減慢打包文件的構建速度
cheap-module-source-map	在一個單獨的文件中生成一個不帶列映射的map，不帶列映射提高項目構建速度，但是也使得瀏覽器開發者工具只能對應到具體的行，不能對應到具體的列（符號），會對調試造成不便
eval-source-map	使用eval打包源文件模塊，在同一個文件中生成乾淨的完整的source map。這個選項可以在不影響構建速度的前提下生成完整的sourcemap，但是對打包後輸出的JS文件的執行具有性能和安全的隱患。不過在開發階段這是一個非常好的選項，但是在生產階段一定不要用這個選項
cheap-module-eval-source-map	這是在打包文件時最快的生成source map的方法，生成的Source Map 會和打包後的JavaScript文件同行顯示，沒有列映射，和eval-source-map選項具有相似的缺點

文／zhangwang（簡書作者）
原文鏈接：http://www.jianshu.com/p/42e11515c10f

正如上表所述，上述選項由上到下打包速度越來越快，不過同時也具有越來越多的負面作用，較快的構建速度的後果就是對打包後的文件的的執行有一定影響。

在學習階段以及在小到中性的項目上，eval-source-map是一個很好的選項，不過記得只在開發階段使用它，繼續上面的例子，進行如下配置

//webpack.config.js
module.exports = {
    devtool: 'eval-source-map',//生成Source Maps,這裏選擇eval-source-map
    entry:  __dirname + '/app/main.js',//唯一入口文件,__dirname是node.js中的一個全局變量，它指向當前執行腳本所在的目錄
    output: {//輸出目錄
        path: __dirname + '/build',//打包後的js文件存放的地方
        filename: 'bundle.js'//打包後輸出的js的文件名
    }
};

安裝React

在終端輸入npm install --save-dev react react-dom同時安裝React和React-DOM

標準的React組件後綴名爲.jsx，而.jsx是默認不被瀏覽器所支持的；所以需要一個轉換器，將不被瀏覽器識別的.jsx文件轉換成瀏覽器能夠正常運行的文件，這個轉換器就是Babel

安裝和配置Babel

文／zhangwang（簡書作者）
原文鏈接：http://www.jianshu.com/p/42e11515c10f

Babel其實是一個編譯JavaScript的平臺，它的強大之處表現在可以通過編譯幫你達到以下目的：

下一代的JavaScript標準（ES6，ES7），這些標準目前並未被當前的瀏覽器完全的支持；
使用基於JavaScript進行了拓展的語言，比如React的JSX
Babel其實是幾個模塊化的包，其核心功能位於稱爲babel-core的npm包中，不過webpack把它們整合在一起使用，但是對於每一個你需要的功能或拓展，你都需要安裝單獨的包（用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包）。

用npm一次性安裝這些依賴包npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

Babel其實可以完全在webpack.config.js中進行配置

但是考慮到babel具有非常多的配置選項，在單一的webpack.config.js文件中進行配置往往使得這個文件顯得太複雜，因此一些開發者支持把babel的配置選項放在一個單獨的名爲 ".babelrc" 的配置文件中。

我們現在的babel的配置並不算複雜，不過之後我們會再加一些東西，因此現在我們就提取出相關部分，分兩個配置文件進行配置（webpack會自動調用.babelrc裏的babel配置選項），如下：

在webpack.config.js中

//webpack.config.js
module.exports = {
    devtool: 'eval-source-map',//生成Source Maps,這裏選擇eval-source-map
    entry: __dirname + "/app/main.js",//唯一入口文件
    output: {//輸出目錄
        path: __dirname + "/build",//打包後的js文件存放的地方
        filename: "bundle.js"//打包後輸出的js的文件名
    },

    module: {
        //loaders加載器
        loaders: [
            {
                test: /\.(js|jsx)$/,//一個匹配loaders所處理的文件的拓展名的正則表達式，這裏用來匹配js和jsx文件（必須）
                exclude: /node_modules/,//屏蔽不需要處理的文件（文件夾）（可選）
                loader: 'babel'//loader的名稱（必須）
            }
        ]
    }
};

在項目根目錄下新建.babelrc文件，沒錯你沒看錯，就是隻有後綴名的文件，添加如下代碼：

//.babelrc
{
  "presets": [
    "react",
    "es2015"
  ]
}

這時已將babel配置完成，可以使用JSX和ES6的語法了。

使用ES6書寫React組件

在app->components目錄下新建一個Component.jsx文件（注意首字母一定要大寫），使用ES6語法返回一個React組件，代碼如下：

//Component1.jsx
import React from 'react';

class Component1 extends React.Component {
    render() {
        return (
            <div>Hello World!</div>
        )
    }
}

//導出組件
export default Component1;

在main.js中使用ES6的語法，定義和渲染Component1模塊，將React組件渲染至html的標籤中：

//main.js
import React from 'react';
import ReactDom from 'react-dom';
import Component1 from './components/Component1.jsx';

ReactDom.render(
    <Component1 />,
    document.getElementById('content')
);

如果你使用的是webstorm，可能會報這個錯Import declarations are not supported by current JavaScript version

解決的方法是File->Settings->Languages&Frameworks->JavaScript，將JavaScript language version改爲ECMAScript6

也可能會報這個錯Switch language level to JSX Harmony

在彈出欄，點擊switch即可

這樣，我們已經將React組件渲染至Html之中了，使用npm start命令重新打包，打包完成後在webstorm中預覽index.html文件，即可看到Hello World！

每次修改完代碼，都需要重新打包才能看到變化嗎？
Facebook的前端大神們怎麼可能會容忍每次都手動打包呢？

我們可以使用webpack-dev-server來搭建本地開發服務器，修改代碼後，立即可以看到變化；所見即所得，大大增加開發效率。

安裝並啓用webpack-dev-server

文／zhangwang（簡書作者）
原文鏈接：http://www.jianshu.com/p/42e11515c10f

想不想讓你的瀏覽器監測你都代碼的修改，並自動刷新修改後的結果，其實Webpack提供一個可選的本地開發服務器，這個本地服務器基於node.js構建，可以實現你想要的這些功能，不過它是一個單獨的組件，在webpack中進行配置之前需要單獨安裝它作爲項目依賴

在終端輸入，安裝webpack-dev-server

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

在webpack.config.js中配置webpack-dev-server，在這裏需要修改下entry的路徑，給它加一個webpack/hot/dev-server，這裏會用到Hot Module Replacement（熱替換）插件，所以需要增加這個前綴，後文會提到，代碼如下：

//webpack.config.js
module.exports = {
    devtool: 'eval-source-map',//生成Source Maps,這裏選擇eval-source-map
    entry: ['webpack/hot/dev-server', __dirname + '/app/main.js'],//唯一入口文件,__dirname是node.js中的一個全局變量，它指向當前執行腳本所在的目錄
    output: {//輸出目錄
        path: __dirname + '/build',//打包後的js文件存放的地方
        filename: 'bundle.js'//打包後輸出的js的文件名
    },

    module: {
        //loaders加載器
        loaders: [
            {
                test: /\.(js|jsx)$/,//一個匹配loaders所處理的文件的拓展名的正則表達式，這裏用來匹配js和jsx文件（必須）
                exclude: /node_modules/,//屏蔽不需要處理的文件（文件夾）（可選）
                loader: 'babel'//loader的名稱（必須）
            }
        ]
    },

    //webpack-dev-server配置
    devServer: {
        contentBase: './build',//默認webpack-dev-server會爲根文件夾提供本地服務器，如果想爲另外一個目錄下的文件提供本地服務器，應該在這裏設置其所在目錄（本例設置到"build"目錄）
        colors: true,//在cmd終端中輸出彩色日誌
        historyApiFallback: true,//在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設置爲true，所有的跳轉將指向index.html
        inline: true,//設置爲true，當源文件改變時會自動刷新頁面
        port: 8080,//設置默認監聽端口，如果省略，默認爲"8080"
        process: true,//顯示合併代碼進度
    }
};

在package.json中配置啓動webpack-dev-server的命令

//package.json，注意：在實際使用過程中package.json不能有任何註釋
{
  ...
  "scripts": {
    "start": "webpack",
    "dev":"webpack-dev-server"
  },
  ...
}

這時，我們可以啓動webpack-dev-server服務器，看看是否能夠實時預覽
在終端裏輸入

npm run dev

如果終端輸出一大堆日誌後，提示webpack: bundle is now VALID則代表本地服務器啓動成功，如果需要停止服務，在終端按ctrl+c，按提示輸入Y即可（如果不行多按幾次...）

在瀏覽器中輸入http://localhost:8080，可以看到，打開了一個空頁面，並沒有顯示Hello World；按F12打開控制檯，可以清除地看到錯誤提示：Uncaught Error: [HMR] Hot Module Replacement is disabled

所以我們來安裝和配置這個Hot Module Replacement。

Hot Module Replacement

文／zhangwang（簡書作者）
原文鏈接：http://www.jianshu.com/p/42e11515c10f

Hot Module Replacement（HMR）是webpack裏很有用的一個插件，它允許你在修改組件代碼後，自動刷新實時預覽修改後的效果。
在webpack中實現HMR也很簡單，只需要做兩項配置

在webpack配置文件中添加HMR插件；
在Webpack Dev Server中添加“hot”參數；
不過配置完這些後，JS模塊其實還是不能自動熱加載的，還需要在你的JS模塊中執行一個Webpack提供的API才能實現熱加載，雖然這個API不難使用，但是如果是React模塊，使用我們已經熟悉的Babel可以更方便的實現功能熱加載。

整理下我們的思路，具體實現方法如下

Babel和webpack是獨立的工具
二者可以一起工作
二者都可以通過插件拓展功能
HMR是一個webpack插件，它讓你能瀏覽器中實時觀察模塊修改後的效果，但是如果你想讓它工作，需要對模塊進行額外的配額；
Babel有一個叫做react-transform-hrm的插件，可以在不對React模塊進行額外的配置的前提下讓HMR正常工作；

在webpack.config.js中配置如下：

//webpack.config.js
var webpack = require('webpack');//引入Webpack模塊供我們調用，這裏只能使用ES5語法，使用ES6語法會報錯

module.exports = {
    devtool: 'eval-source-map',
    entry: ['webpack/hot/dev-server', __dirname + '/app/main.js'],
    output: {
        path: __dirname + '/build',
        filename: 'bundle.js'
    },

    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel'
            }
        ]
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin()//熱模塊替換插件
    ],

    devServer: {
        contentBase: './build',
        colors: true,
        historyApiFallback: true,
        inline: true,
        port: 8080,
        process: true
    }
};

其實，這時候已經可以正常工作了；在終端輸入npm run dev，待命令行提示webpack: bundle is now VALID後，在瀏覽器中輸入http://localhost:8080，可以看到，正常顯示Hello World

在webstorm中更改React返回的內容，ctrl+s即可看到瀏覽器頁面同步刷新，所見即所得

如果覺得這樣不放心，讓我們謹遵醫囑，進行如下額外配置

安裝react-transform-hmr，在不對React模塊進行額外的配置的前提下讓HMR正常工作

npm install --save-dev babel-plugin-react-transform react-transform-hmr

在.babelrc文件裏配置babel，注意這裏有一堆括號，別寫錯了

//.babelrc
{
  "presets": [
    "react",
    "es2015"
  ],
  "env": {
    "development": {
      "plugins": [
        [
          "react-transform",
          {
            "transforms": [
              {
                "transform": "react-transform-hmr",
                "imports": [
                  "react"
                ],
                "locals": [
                  "module"
                ]
              }
            ]
          }
        ]
      ]
    }
  }
}

至此，已經用webpack構建好了React項目的基礎依賴，可以愉快的開發React程序了。

作者：waka
鏈接：http://www.jianshu.com/p/4df92c335617
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

從零開始，教你用Webpack構建React基礎工程

webstorm 2017 激活破解

http://blog.csdn.net/it_talk/article/details/52448597

20170315更新

前言

開發環境

項目結構

創建package.json文件

安裝webpack

創建webpack.config.js

更方便的執行打包任務

使用Source Maps，使調試更容易

安裝React

安裝和配置Babel

使用ES6書寫React組件

安裝並啓用webpack-dev-server

Hot Module Replacement

使用neovim打造go ide(支持代碼跳轉, 代碼補全, 實時語法檢查)

挑戰程序設計競賽 2.3章習題 poj 3046 Ant Counting

Shell/Python中的用戶名獲取

vr開發

基於WebStorm, React和Ant.Design開發WebAppDemo

textview特效

移動客戶端開發快速上手ReactNative的學習路線

Android視頻直播的實現

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結