在本搭建項(xiàng)目過(guò)程中有考慮到 React負(fù)責(zé)UI渲染诅诱，還需要用redux來(lái)管理數(shù)據(jù)髓堪，使用es6，webpack娘荡，為了提高性能干旁，需要按需加載，還有immutable.js炮沐、單元測(cè)試等等争群。下面將會(huì)詳細(xì)介紹
搭建項(xiàng)目流程
1 > mkdir dataProject && cd dataProject
2 > npm init
3 > npm install webpack --save-dev
注： --save-dev 與 –save的區(qū)別
--save-dev 開(kāi)發(fā)時(shí)候依賴的東西，放在package.json的devDependencies模塊大年，--save 發(fā)布之后還依賴的東西换薄，放在dependencies模塊玉雾。
比如，你寫 ES6 代碼轻要，如果你想編譯成 ES5 發(fā)布那么 babel 就是devDependencies复旬。
如果你用了jQuery，由于發(fā)布之后還是依賴jQuery冲泥，所以是dependencies赢底。但是在 npm 里面除了二進(jìn)制的依賴，似乎也不用區(qū)分是不是dev柏蘑。因?yàn)槭褂胣pm就是自己編譯的意思，而不使用npm直接拿編譯后的版本的粹庞，這些依賴項(xiàng)也看不到咳焚。
4 webpack配置
a. entry和output
entry: webpack 應(yīng)該使用哪個(gè)模塊，來(lái)作為構(gòu)建其內(nèi)部依賴圖的開(kāi)始庞溜「锇耄可根據(jù)它的屬性定義設(shè)置單入口應(yīng)用程序、分離應(yīng)用程序流码、多頁(yè)面程序又官。
output: 配置 output 選項(xiàng)可以控制 webpack 如何向硬盤寫入編譯文件。filename 用于輸出文件的文件名漫试。目標(biāo)輸出目錄 path 的絕對(duì)路徑六敬。
const config = {
entry: path.join(__dirname, 'src/index.js'),
output:{
path: path.join(__dirname, 'dist'),
filename: 'app.js'
}}
學(xué)會(huì)使用webpack
在package.json中的script屬性設(shè)置命令：
"build": "webpack --config webpack.config.js"
運(yùn)行 npm run build，會(huì)發(fā)現(xiàn)多了一個(gè)dist文件夾驾荣，其內(nèi)部包含一個(gè)app.js文件
dist文件夾下面新建一個(gè)app.html
dist/app.html填寫內(nèi)容
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./app.js" charset="utf-8"></script>
</body>
</html>
用瀏覽器打開(kāi)app.html外构，會(huì)發(fā)現(xiàn)src內(nèi)部的index.js內(nèi)容被編譯到了app.js。
b. loader
loader讓webpack 能夠去處理那些非JavaScript 文件播掷，可以將所有類型的文件轉(zhuǎn)換為 webpack 能夠處理的有效模塊审编，然后你就可以利用 webpack 的打包能力，對(duì)它們進(jìn)行處理歧匈。實(shí)質(zhì)上是垒酬，將所有類型的文件，轉(zhuǎn)換為應(yīng)用程序依賴圖可以直接引用的模塊件炉。
比如npm install --save-dev css-loader勘究，告訴webpack加載css文件。
loader: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},{
test: /\.(png|jpg|gif|woff|woff2)$/,
loader: 'url-loader?limit=8192'
},{
test: /\.(mp4|ogg|svg)$/,
loader: 'file-loader'
},{
test:/\.json$/,
loader:'json-loader'
}
]
loader 支持鏈?zhǔn)絺鬟f妻率。能夠?qū)Y源使用流水線(pipeline)乱顾。一組鏈?zhǔn)降?loader 將按照先后順序進(jìn)行編譯。
一個(gè)loader預(yù)期導(dǎo)出一個(gè)函數(shù)宫静，而且是用兼容javascript的nodepgn
c.（后續(xù)補(bǔ)充）
d.plugin
webpack 插件是一個(gè)具有 apply 屬性的 JavaScript 對(duì)象走净。apply 屬性會(huì)被 webpack compiler 調(diào)用券时，并且 compiler 對(duì)象可在整個(gè)編譯生命周期訪問(wèn)
const webpack = require('webpack'); //訪問(wèn)內(nèi)置的插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通過(guò) npm 安裝
let BowerWebpackPlugin = require('bower-webpack-plugin');
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'}),
new BowerWebpackPlugin({
searchResolveModulesDirectories: false
})
]
解析：
HtmlWebpackPlugin:自動(dòng)生成一個(gè)HTML文件，并引用相關(guān)的assets文件伏伯。
webpack.optimize.UglifyJsPlugin()：壓縮插件橘洞，優(yōu)化縮小js包體積。
webpack.optimize.CommonsChunkPlugin()：提取公共代碼塊说搅。webpack的資源入口通常是以entry為單元進(jìn)行編譯提取炸枣，那么當(dāng)多entry共存的時(shí)候，它可以對(duì)所有依賴的chunk以module為單位進(jìn)行公共部分的提取弄唧∈食Γ可以向其內(nèi)部輸入?yún)?shù)來(lái)設(shè)置提取所有入口的公共部分，也可以提取部分公共部分候引『钛可以實(shí)現(xiàn)：
①多入口，模塊重復(fù)引用澄干，分文件輸出（將多次引用的模塊打包到公共模塊）
②將公共業(yè)務(wù)模塊與類庫(kù)或框架分開(kāi)打包逛揩；
（見(jiàn)https://segmentfault.com/a/1190000006808865）
延伸：如何解決webpack大包體積過(guò)大
e.resolve
設(shè)置模塊如何被解析，其常用屬性有：
Alias：創(chuàng)建 import 或 require 的別名麸俘，來(lái)確保模塊引入變得更簡(jiǎn)單
extension：自動(dòng)解析擴(kuò)展辩稽，能夠使用戶在引入模塊時(shí)不帶擴(kuò)展，默認(rèn)有[‘.js’,’.json’]从媚。
plugins：應(yīng)該使用的額外的解析插件列表
e.devServer
webpack-dev-server 能夠用于快速開(kāi)發(fā)應(yīng)用程序逞泄，使用方法
devServer: {
contentBase: './src/',
historyApiFallback: true,
hot: true,
port: defaultSettings.port,
publicPath: defaultSettings.publicPath,
noInfo: false
}
contentBase：告訴服務(wù)器從哪里提供內(nèi)容。只有在你想要提供靜態(tài)文件時(shí)才需要静檬。
historyApiFallback：當(dāng)使用 HTML5 History API 時(shí)炭懊，任意的 404 響應(yīng)都可能需要被替代為 index.html，則其值為true拂檩。通過(guò)傳入一個(gè)對(duì)象侮腹，比如使用 rewrites 這個(gè)選項(xiàng)，此行為可進(jìn)一步地控制稻励。
hot：?jiǎn)⒂?webpack 的模塊熱替換特性
port:指定要監(jiān)聽(tīng)請(qǐng)求的端口號(hào)
publicPath：此路徑下的打包文件可在瀏覽器中訪問(wèn)
noInfo：當(dāng)為true時(shí)父阻，啟用 noInfo 后，諸如「啟動(dòng)時(shí)和每次保存之后望抽，那些顯示的 webpack 包(bundle)信息」的消息將被隱藏加矛。錯(cuò)誤和警告仍然會(huì)顯示。
lazy：當(dāng)啟用 lazy 時(shí)煤篙，dev-server 只有在請(qǐng)求時(shí)才編譯包(bundle)斟览。這意味著 webpack 不會(huì)監(jiān)視任何文件改動(dòng)。我們稱之為“惰性模式”辑奈。
e.
后續(xù)使用過(guò)程再補(bǔ)充
5 babel
Babel 把用最新標(biāo)準(zhǔn)編寫的 JavaScript 代碼向下編譯成可以在今天隨處可用的版本苛茂。 這一過(guò)程叫做“源碼到源碼”編譯已烤， 也被稱為轉(zhuǎn)換編譯。
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0
a. babel文件配置
新建babel配置文件.babelrc妓羊，內(nèi)容為
{
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": []
}
b.詳細(xì)介紹
①babel-core 轉(zhuǎn)碼
如果你需要以編程的方式來(lái)使用 Babel胯究，可以使用 babel-core 這個(gè)包。babel-core 的作用是把 js 代碼分析成 ast 躁绸，方便各個(gè)插件分析語(yǔ)法進(jìn)行相應(yīng)的處理裕循。有些新語(yǔ)法在低版本 js 中是不存在的，如箭頭函數(shù)净刮，rest 參數(shù)剥哑，函數(shù)默認(rèn)值等，這種語(yǔ)言層面的不兼容只能通過(guò)將代碼轉(zhuǎn)為 ast淹父，分析其語(yǔ)法后再轉(zhuǎn)為低版本 js星持。
首先安裝 babel-core
②babel-loader
允許用babel或webpack編譯JavaScript文件。
需要在webpack的配置文件中的添加babel-loader：
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
③ babel-preset-es2015 用于解析 ES6
④ babel-preset-react 用于解析 JSX
⑤ babel-preset-stage-0 用于解析 ES7 提案
檢測(cè)：將index.js文件使用箭頭函數(shù)編寫
var fun = str => {
document.getElementById('app').innerHTML = str;
}
fun('Babel設(shè)置成功')
