根据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
npm install --save-dev css-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 (
<Button>hello wechat</Button>
);
}
}
ReactDOM.render((
<App/>
), document.getElementById('container'));
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello weui</title>
</head>
<body>
<div id="container"></div>
<script src="dist/bundle.js"></script>
</body>
</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
<head>
<meta charset="UTF-8">
<title>Hello weui</title>
+ <link rel="stylesheet" href="dist/styles.css" />
</head>
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')
+ ]
}
相关文档：
网友评论