浮声新志

react-webpack 入门Demo展示

发表于 | 分类于 |

基本命令配置

  1. node环境下npm包的安装依赖 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    $ mkdir react-demo && cd react-demo
    $ npm i -S webpack webpack-dev-server \
    html-webpack-plugin webpack-merge \
    babel-loader babel-core css-loader \
    style-loader babel-preset-react-hmre \
    babel-preset-es2015 babel-preset-react -D
    $ mkdir app dist assets
    $ vim assets/index.tmpl.html

  2. 编写 index.tmpl.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
    <div id="root"></div>
    </body>
    </html>

  3. 配置你的 package.json 参数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    {
        "script":{
            "build":"webpack .",
            "start":"webpack-dev-server ."
        },
        "babel":{
          "presets":[
            "es2015","react"
          ],
          "env":{
            "start":{
              "presets":[
                  "react-hmre"
              ]
            }
          }
        }
    }

  4. 新建 webpack.config.js 文件，来初始化webpack设置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const webpack = require('webpack');
    const merge = require('webpack-merge');
    const TAGET = process.env.npm_lifecycle_event;
    process.env.BABEL_ENV = TAGET;
    const PATHS = {
        app: path.join(__dirname,'app'),
        build: path.join(__dirname,'dist'),
        template: path.join(__dirname,'assets','index.tmpl.html')
    };
    const common = {
        entry:{
            app:PATHS.app
        },
        output:{
            path:PATHS.build,
            filename:'bundle.js'
        },
        plugins:[
            new HtmlWebpackPlugin({
                title: 'react demo',
                template: PATHS.template,
                inject: 'body'
            })
        ],
        module:{
         loaders: [
             {
              test: /\.jsx?$/,
              loaders: ['babel?cacheDirectory'],
              include: PATHS.app,
            }, {
              test: /\.css$/,
              loaders: ['style', 'css'],
              include: PATHS.app,
            }
         ],
        },
        resolve:{
            extensions:['','js','jsx']
        }
    };
    if(TAGET === 'start' || ! TAGET) {
        module.exports = merge(common,{
            devtool:'eval-source-map',
            devServer:{
                contentBase:'/dist',
                historyApiFallback: true,
                hot:true,
                inline:true,
                progress:true,
                stats:'errors-only'
            },
            plugins:[
                new webpack.HotModuleRepleacementPlugin(),
            ]
        });
    }
    if(TAGET === 'start' || ! TAGET) {
        module.exports = merge(common,{});
    }

App.jsx文件编写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import React,{ Component } from 'react'
import {
    Router,
    Route,
    Link,
    IndexLink,
    IndexRoute,
    hashHistory,
} from 'react-router';
const activeStyle = {
  color: '#53acff',
};
const Nav = () => (
    <div>
    <IndexLink onlyActiveOnIndex activeStyle={activeStyle} to="/">主页</IndexLink>          
    <IndexLink onlyActiveOnIndex activeStyle={activeStyle} to="/address">地址</IndexLink>
    </div>
);
const Container = (props) =>(
<div>
    <Nav /> { props.children }
</div>);
const Twitter = () => (<div>@xiaomingplus twitter</div>);
const Instagram = () => (<div>@xiaomingplus instagram</div>);
const NotFound = () => (
    <h1>404.. 找不到该页面!</h1>
);
const Home = () => (
    <h1>你好，这是主页。</h1>
);
const Address = (props) => (
<div>
    <br />
    <Link activeStyle={{ color: '#53acff' }} to="/address">这是Twitter</Link>  
    <Link to="/address/instagram">这是Instagram</Link>
    <h1>欢迎互关！</h1>
    { props.children }
</div>
);
class App extends Component {
  construct() {
  }
  render() {
    return (
        <Router history={hashHistory}>
            <Route path="/" component={Container}>
                <IndexRoute component={Home} />
                <Route path="/address" component={Address}>
                    <IndexRoute component={Twitter} />
                    <Route path="instagram" component={Instagram} />
                </Route>
                <Route path="*" component={NotFound} />
            </Route>
        </Router>
    );
  }
}
export default App;

index.jsx文件编写

1
2
3
4
5
6
7
8
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(
    <App />, 
    document.getElementById('root')
);

本地启动服务器

1
$ npm start