npm+webpack+babel+react安裝

npm+webpack+babel+react安裝

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內容，頁面將會局部刷新。