筆者剛開始接觸到webpack的時候是因為這個時候react已經(jīng)滿天飛了麦轰，想開始react的開發(fā)卢鹦，雖然很多前端Er都說react上手不難招驴，可是這一套工具鏈把很多小白都拒之門外疼约，webpack+es6+react這套簡單的工作流我也是找了很久，煞費苦心最仑，剛開始有點上手webpack1的時候webpack2出現(xiàn)了的妖，然后我又看了很久文檔润歉，現(xiàn)在出一個簡易版的Webpack2 + es6 + react的配置工作流給大家绅喉，讓大家速度開始寫上react!
首先如果大家npm安裝package太慢的話可以先安裝淘寶的cnpm工具
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝全局的webpack工具
cnpm install -g webpack webpack-dev-server
webpack-dev-server是一個小型的node服務(wù)器趴捅，下面開始初始化我們的項目
mkdir app && cd app/ && npm init
初始化項目后安裝css-loader 以及webpack
cnpm install webpack css-loader --save-dev
安裝一下babel的一些工具，目的不用多說霹疫，我們的es6、jsx的代碼都要靠它來打包
cnpm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
當(dāng)然還有react和react-dom
cnpm install react react-dom --save-dev
這個時候發(fā)現(xiàn)package.json的文件中devDependencies出現(xiàn)了下面的信息
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.3",
"style-loader": "^0.18.1",
"webpack": "^2.6.1"
},
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4"
}
把這些依賴安裝結(jié)束后我們要開始寫我們的webpack.config.js文件了综芥，這個文件是我們在終端輸入了webpack后讀取的第一個文件丽蝎，因為筆者也是一個webpack2小白，做了一些比較簡單的配置膀藐，讓大家先用上react,所以大神就可以忽略以該文章了
var path = require('path');
module.exports = {
entry: './app/main.jsx',
output: {
path: path.resolve(__dirname, './app/build'), // 輸出文件的保存路徑
filename: 'bundle.js' // 輸出文件的名稱
},
module: {
loaders: [{
test: /\.jsx?$/,
loaders: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
]
}
};
寫的比較簡單屠阻，包括一個入口文件，一個輸出文件的地址额各，我們的入口文件在app文件下的main.jsx,輸出文件在app/build下面的 bundle.js文件国觉，下面我們來新建這些文件吧，目錄給大家：
圖片比較失真虾啦，大概圖你要有一個app文件夾麻诀，app/build用來存放打包好的文件，一個index.html傲醉，一個main.jsx
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack2</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="./build/bundle.js"></script>
</html>
main.jsx
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component{
render(){
return(
<h1>Hello Webpack Hello React</h1>
)
}
}
ReactDOM.render(
<App></App>,
document.getElementById('app')
)
好了蝇闭，在你的文件的根目錄輸入
webpack
然后用你最喜歡的瀏覽器（我喜歡chrome）打開index.html吧！
now enjoy react!
please email huang93223@126.com
