1.首先要安裝 Node.js， Node.js 自帶了軟件包管理器 npm
2.在項目文件目錄下生成package.json
~~~
# 進入項目目錄
$ npm init
~~~
3.用 npm 安裝 Webpack
~~~
$ npm install webpack -g
~~~
此時 Webpack 已經安裝到了全局環境下，通常我們會將 Webpack 安裝到項目的依賴中，這樣就可以使用項目本地版本的 Webpack。
~~~
# 進入項目目錄
# 安裝 webpack 依賴:
$ npm install webpack --save-dev
~~~
4.用 npm 安裝 模塊加載器(loader)
~~~
$ npm install style-loader css-loader -g
~~~
將 style-loader css-loader 安裝到項目的依賴中
~~~
# 進入項目目錄
# 安裝 style-loader css-loader 依賴:
$ npm install style-loader css-loader --save-dev
~~~
5.用 npm 安裝 html-webpack-plugin
~~~
# 進入項目目錄
# 安裝 html-webpack-plugin 依賴:
$ npm install html-webpack-plugin --save-dev
~~~
6.用 npm 安裝 webpack-dev-server
~~~
# 進入項目目錄
# 安裝 webpack-dev-server 依賴:
$ npm install webpack-dev-server --save-dev
~~~
7.用 npm 安裝 babel-cli: babel轉碼器
~~~
$ npm install babel-cli -g
# 進入項目目錄
# 安裝 babel-cli 依賴:
$ npm install babel-cli --save-dev
~~~
8.用 npm 安裝 babel-preset-es2015
~~~
$ npm install babel-preset-es2015 -g
# 進入項目目錄
# 安裝 babel-preset-es2015 依賴:
$ npm install babel-preset-es2015 --save-dev
~~~
9.用 npm 安裝 babel-loader
~~~
# 進入項目目錄
# 安裝 babel-loader 依賴:
$ npm install babel-loader --save-dev
~~~
10.用 npm 安裝 react
~~~
$ npm install react react-dom babel-preset-react -g
# 進入項目目錄
# 安裝 react 依賴:
$ npm install react react-dom babel-preset-react --save-dev
~~~
11.用 npm 安裝 react-hot-loader
~~~
# 進入項目目錄
# 安裝 react-hot-loader 依賴:
$ npm install react-hot-loader --save-dev
~~~
11.在項目文件目錄下創建.babelrc文件
`{"preset":["es2015"],"react"}`
12.在項目文件目錄下創建example文件夾,并在其下面創建如下文件
~~~
index.jsx：
var React = require("react");
var ReactDOM = require("react-dom");
import App from './app.jsx';
var Hello = React.createClass({
render:function(){
return <div>1234<App/></div>
}
});
var div1 = document.createElement("div");
document.body.appendChild(div1);
ReactDOM.render(<Hello />,div1);
app.jsx:
var React = require("react");
var ReactDOM = require("react-dom");
export default class App extends React.Component{
render(){
return <h1>hello reactJs</h1>
}
}
~~~
13.在項目文件目錄下建立webpack.config.js
~~~
var htmlWebpackPlugin = require('html-webpack-plugin'); //使用自動生成html文件的一個插件
var path = require('path');
module.exports = {
entry: './example/index.jsx',
output:{
path:'./example_build/',
filename:'build.js'
},
module:{
loaders:[
{
test:/\.css$/,
loaders:['style','css'],
exclude:'node_modules'
},
{
test:/\.jsx?$/,
loaders:['react-hot','babel?presets[]=es2015&presets[]=react'],
exclude:"/node_modules/",
include:path.resolve(__dirname,"example")
}
] },
resolve:{
extensions:['','.js','.css','.jsx'] },
devServer: {
hot:true,
inline:true
},
plugins:[
new htmlWebpackPlugin({
title:"First react app"
})
]}
~~~
14.webpack打包
~~~
# 進入項目目錄
$ webpack
~~~
此時項目目錄下將會生成example_build文件夾，其內部也生成build.js 和 index.html文件，
15.webpack-dev-server 熱加載
~~~
# 進入項目目錄
$ webpack-dev-server --hot --inline
~~~
此時在瀏覽器中打開http://localhost:8080/，將會看到example_build下index.html頁面內容。
這時，修改example下的index.jsx內容，頁面將會自動刷新；修改exampleg下的app.js內容，頁面將會局部刷新。
