React環(huán)境搭建（一）：webpack
author: lordkhan
date: 2017-02-08
reference: React由0到1 by 隨風(fēng)溜達(dá)的向日葵
github: hellojianshu/react-demo
參考《React由0到1》這篇文章谐岁，開始React開發(fā)環(huán)境的搭建感凤。
$1 安裝配置node.js
$1-1 安裝node.js
到node官網(wǎng)下載node.js峭竣，安裝。
$1-2 全局安裝webpack包
npm install webpack -g
如果在國內(nèi)的話情龄，建議用淘寶的鏡像，安裝包捍壤，你懂得骤视。國內(nèi)替代命令：
npm install cnpm -g
# cnpm 是使用國內(nèi)鏡像安裝包, -ddd 是顯示詳細(xì)的安裝過程
cnpm install webpack -g -ddd
$1-3 新建node項目
新建一個文件夾，cd 進(jìn)入后鹃觉，運(yùn)行：
npm init
國內(nèi)替代命令：
cnpm init -ddd
然后一律回車专酗，走默認(rèn)選項就好。
$1-4 配置node項目
修改package.json文件盗扇，添加項目包：
{
"name": "react-demo",
"version": "1.0.0",
"description": "react-demo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/hellojianshu/react-demo.git"
},
"author": "hello jianshu",
"license": "MIT",
"bugs": {
"url": "https://github.com/hellojianshu/react-demo/issues"
},
"homepage": "https://github.com/hellojianshu/react-demo#readme",
"devDependencies": {
"webpack": "^1.13.3",
"css-loader": "^0.25.0",
"style-loader": "^0.13.1",
"webpack-dev-server": "^1.16.2"
}
}
$1-5 安裝包
運(yùn)行命令：
npm install
國內(nèi)替代命令：
cnpm install -ddd
$2 webpack——測試運(yùn)行
先寫一個index.html：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
然后添加一個entry.js[1]：
require("!style!css!./style.css");
document.write('<h1>hello webpack</h1>');
接著添加一個style.css：
h1{
color:red;
}
運(yùn)行以下命令：
webpack ./entry.js bundle.js
就會發(fā)現(xiàn)在目錄中生成了一個bundle.js文件祷肯。瀏覽器中打開index.html就會看到執(zhí)行效果：
$3 webpack——利用分析工具打包
增加一個名為module.js的文件：
module.exports = 'It works from module.js.'
在原來的entry.js增加引用：
require("!style!css!./style.css");
document.write('<h1>hello webpack</h1>');
//新增對module.js的引用
document.write(require('./module.js'));
然后同樣執(zhí)行webpack打包命令：
webpack ./entry.js bundle.js
然后在打開index.html，會發(fā)現(xiàn)我們新增加的module.js的內(nèi)容被正確輸出疗隶。這是因為我們在頁面中通過nodejs的require的方式引入的module.js佑笋，而使用webpack打包時會自動在依賴關(guān)系中引入module.js。
$4 webpack——加載器
webpack提供了一個非常強(qiáng)大的loader功能斑鼻，這個功能可以用于管理各種依賴關(guān)系模塊蒋纬，在webpack中所有的文件都視作一個模塊。
首先npm導(dǎo)入webpack loader：
npm install css-loader style-loader
添加一個用于測試的style.css文件：
h1{
color:red;
}
在entry.js中添加引用：
require("!style!css!./style.css");//添加對css的引用
document.write('<h1>hello webpack</h1>');
document.write(require('./module.js'));
使用命令行打包：
webpack ./entry.js bundle.js --module-bind 'css=style!css'
會發(fā)現(xiàn)css的樣式生效了坚弱∈癖福可以將繁瑣的“!style!css!./style.css”簡寫成"./style.css"[2]。
$5 使用配置管理
webpack同樣可以使用標(biāo)準(zhǔn)化配置文件來替代命令行中的各種參數(shù)荒叶。
webpack的配置文件是nodejs的文件碾阁，通常命名為 webpack.config.js。我們在工程中增加配置文件：
module.exports = {
entry: './entry.js',//定義要引入的js文件
output: {
path: __dirname,
filename: 'bundle.js' //定義要輸出的js文件
},
module: {
loaders: [//定義加載內(nèi)容
{test: /\.css$/, loader: 'style!css'}
]
}
}
現(xiàn)在停撞，我們在命令行中輸入webpack就可以實現(xiàn)和前面一樣的打包[3]瓷蛙。
$5 webpack——豐富打包輸出內(nèi)容
可以使用：
webpack --progress --colors
命令來豐富打包輸出的內(nèi)容悼瓮，更容易了解出現(xiàn)的問題。效果如下：
$6 webpack——監(jiān)聽更新模式
在我們進(jìn)行編碼開發(fā)的時候艰猬，每次對文件的編輯我們都想立即看到編譯效果横堡，如果每次編輯都要去打包，會非常麻煩冠桃。webpack提供了一個監(jiān)聽模式（類似grunt的watch）命贴，用于監(jiān)聽每次對文件的修改，修改后會立即進(jìn)行增量更新食听。啟用監(jiān)聽模式胸蛛，以便能自動實時編譯：
webpack --progress --colors --watch
監(jiān)聽模式使用的是內(nèi)存增量更新。webpack會將所有需要打包的文件copy到內(nèi)存樱报，然后監(jiān)控文件修改葬项，如果文件發(fā)生了修改，會將修改的文件替換內(nèi)存中的對應(yīng)文件迹蛤。因此開發(fā)完之后民珍，切記進(jìn)行一次手動打包才能生效。
$7 webpack——開發(fā)環(huán)境模式
webpack更強(qiáng)大的是盗飒，他整合了nodejs的express提供了一個靜態(tài)服務(wù)器嚷量。（雖然沒有官方正式，我覺得webstrom和微信本地開發(fā)環(huán)境都是整合的nodejs的express）
使用了開發(fā)環(huán)境模式逆趣，我們所有的動態(tài)修改和操作都可以實時看到效果蝶溶，并且解決了靜態(tài)資源各種路徑引用的問題。首先npm安裝工具：
npm install webpack-dev-server -g
國內(nèi)替代命令：
cnpm install webpack-dev-server -g -ddd
然后使用命令行工具啟用開發(fā)環(huán)境：
webpack-dev-server --progress --colors
webpack的開發(fā)環(huán)境模式很強(qiáng)悍宣渗，比使用--watch更犀利的地方在于可以實現(xiàn)編輯即可見抖所。瀏覽器立即同步刷新運(yùn)行。開發(fā)環(huán)境模式可以延伸到生產(chǎn)環(huán)境實現(xiàn)代碼同步級別的熱部署落包，效果如下：
要注意的是部蛇，此時不是直接在瀏覽器中打開html文件，而是根據(jù)打開本地的服務(wù)器咐蝇，例如上例中涯鲁，打開
http://localhost:8080/webpack-dev-server/
如果要自定義端口，運(yùn)行：
webpack-dev-server --progress --colors --port 3000
$8 webpack拓展
$8-1 輸出調(diào)試信息
webpack --display-error-details
路徑配置最好使用絕對路徑有序，建議通過 path.resolve(__dirname, "app/folder") 或 path.join(__dirname, "app", "folder") 的方式來配置抹腿，以兼容 Windows 環(huán)境。
$8-2 webpack插件
webpack的常規(guī)功能無法滿足需求時旭寿，可以開發(fā)或使用webpack插件警绩。一個插件的標(biāo)準(zhǔn)格式：
function MyPlugin(options) {
// Configure your plugin with options...
}
MyPlugin.prototype.apply = function(compiler) {
compiler.plugin("compile", function(params) {
console.log("The compiler is starting to compile...");
});
compiler.plugin("compilation", function(compilation) {
console.log("The compiler is starting a new compilation...");
compilation.plugin("optimize", function() {
console.log("The compilation is starting to optimize files...");
});
});
compiler.plugin("emit", function(compilation, callback) {
console.log("The compilation is going to emit files...");
callback();
});
};
module.exports = MyPlugin;
$8-3 編輯器的文件緩存
有的編輯器有文件緩存的功能，在編輯完畢保存之后并不會實時的更新磁盤文件盅称，這樣的就導(dǎo)致webpack的開發(fā)環(huán)境無法同步更新文件肩祥。
例如webstorm后室，需要到File->settings->System Settings，將Use "safe write"的勾選去掉混狠。
