1、首先下載Node.js,並配置好環境變量
nodejs下載鏈接 ：https://nodejs.org/en/download/
2、安裝全局包
由於“牆”的原因，建議使用淘寶的npm鏡像，下載：npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm install babel -g
$ cnpm install webpack -g
$ cnpm install webpack-dev-server -g
3、創建一個空項目
安裝好後創建一個名叫 learn-webpack 的項目並進入該項目文件夾，
mkdir learn-webpack && cd learn-webpack 通過編輯器找到剛纔創建的項目。
使用終端進入創建項目所在文件夾的的初始化環境
初始化 package.json,根據提示填寫 package.json的相關信息
$ cnpm init
下載 webpack依賴， --save-dev表示將依賴添加到 package.json中的 'devDependencies' 對象中
$ cnpm install webpack --save-dev
下載完後，根目錄會增加如下兩個文件
繼續使用終端安裝需要的組件模塊
$ cnpm install webpack-dev-server --save-dev
babel 相關的模塊
$ cnpm install babel-loader babel-preset-es2015 babel-preset-stage-0 babel-preset-react babel-polyfill --save-dev
react 相關的模塊
$ cnpm install react-dom --save
在根目錄新建文件 webpack.config.js
var path = require('path');
module.exports = {
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
contentBase: './app',
port: 8090
},
entry : [
path.resolve(__dirname, 'app/main.jsx'),
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8090'
],
output : {
path : path.resolve(__dirname, 'build'),
filename:'bundle.js',
},
module: {
loaders: [
{
test: /\.js[x]$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'stage-1', 'react']
}
},
{ test: /\.scss$/,loader: 'style!css!sass'},
// { test: /\.css$/,loader: 'style-loader!css-loader'},
]
}
}; main.jsx
// 'use strict'
// var component = require("./component.js");
// document.body.appendChild(component());
var React = require('react');
var ReactDom = require('react-dom');
var Rstas = require('./Rstas.jsx');
var Hello = React.createClass({
render : function render(){
return (
<div>
<span>
Hello {this.props.name}
</span>
<Rstas name='newxxxxxxx' />
</div>
)
}
});
ReactDom.render(
<Hello name="World" />,
document.getElementById('AppRoot')
);
module.exports = Hello; Ratas.jsx
var React = require('react');
var Rstas = React.createClass({
render : function render(){
return <div>xxxx {this.props.name}</div>;
},
componentDidMount : function(){
console.log('.............');
console.log('.............');
console.log('.............');
console.log('.............');
}
});
module.exports = Rstas;index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div id='AppRoot'></div>
<script src="bundle.js"></script>
</body>
</html>手動創建babel的配置文件（規範名稱“.babelrc”）
{
"presets": [
"es2015",
"react",
],
"plugins": []
}
切換到終端，還是在之前的根目錄輸入$ cnpm run dev
沒有報錯後，切換到瀏覽器在地址欄輸入 localhost:8090.
全部步驟都在這，在學習時出現別的錯誤百度一下基本都能解決。
