运行react-weui例子步骤

根据react-weui工程readme安装package

初始化工程

npm init

安装react和weui

npm install --save react react-dom
npm install --save weui react-weui

安装webpack

npm install --save-dev webpack

Let’s install the babel-loader and babel-core packages that we’ll use to work with Webpack,
as well as the ES2015 and React presets for loading the code that we’ll write.

npm install --save-dev babel-loader babel-core babel-preset-es2015 babel-preset-react

css-loader

npm install --save-dev css-loader

style-loader

npm install --save-dev style-loader

app.js:

// app.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

//import using commonJS Module *Require Plugins
//import { Button } from 'react-weui'

//import Using ES6 syntax
import WeUI from 'react-weui';

//import styles
import 'weui';
import 'react-weui/lib/react-weui.min.css';

const {Button} = WeUI;

class App extends Component {
    render() {
        return (
            hello wechat
        );
    }
}

ReactDOM.render((
    
), document.getElementById('container'));

index.html

webpack.config.js

const path = require('path');

module.exports = {
    entry: './app.js',
    output:  {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['es2015', 'react']
                  }
                }
            }
        ]
    }
}

使用webpack-dev-server运行

./node_modules/.bin/webpack-dev-server --progress --colors

浏览器访问：http://localhost:8080/webpack-dev-server/

如果把css额外打包

用到：

npm install --save-dev extract-text-webpack-plugin

代码修改，index.html

   
     
     
+    
   

webpack.config.js

--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,4 +1,5 @@
 const path = require('path');
+const ExtractTextPlugin = require('extract-text-webpack-plugin')

 module.exports = {
     entry: './app.js',
@@ -20,8 +21,14 @@ module.exports = {
             },
             {
                 test: /\.css$/,
-                use: [ 'style-loader', 'css-loader' ]
+                use: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader'
+                })
             }
         ]
-    }
+    },
+    plugins: [
+        new ExtractTextPlugin('styles.css')
+    ]
 }

相关文档：

• Code Splitting - CSS

• extract-text-webpack-plugin

• 使用webpack和Babel运行React

• react-weui