add base static files for test webpack

functions · functions · commit 4b678cf677df · 2016-07-11T23:39:19.000+08:00
diff --git a/app.js b/app.js
@@ -8,9 +8,7 @@ app.get('/', function (req, res) {
   res.send('Hello World!');
 });
 
-var server = app.listen(3000, function () {
-  var host = server.address().address;
+var server = app.listen(8888, function () {
   var port = server.address().port;
-
-  console.log('Example app listening at http://%s:%s', host, port);
+  console.log('Example app listening at http://127.0.0.1:' + port);
 });
diff --git a/gulpfile.js b/gulpfile.js
@@ -19,7 +19,6 @@ gulp.task('webpack', function() {
  *    webpack-dev-server  *
  **************************/
 gulp.task('webpack-dev-server', function() {
-
     //start webpack develop server
     var webpackConfig = require('./webpack.dev.config');
     var WebpackDevServer = require('webpack-dev-server');
diff --git a/static/html/index.html b/static/html/index.html
diff --git a/static/index.html b/static/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>webpack + react + sass + express</title>
+    <link rel="stylesheet" href="http://127.0.0.1:3000/build/index.css">
+</head>
+<body>
+    <div class="main"></div>
+    <script src="http://127.0.0.1:3000/build/index.js"></script>
+</body>
+</html>
diff --git a/static/js/app.js b/static/js/app.js
@@ -0,0 +1,15 @@
+window.React = require('react');
+window.ReactDOM = require('react-dom');
+window.ReactRouter = require('react-router');
+window.Antd = require('antd');
+
+import 'style/modules/pageA.scss';
+import Index from './modules/index';
+
+var { Router ,Route, browserHistory, IndexRoute } = ReactRouter;
+
+ReactDOM.render((
+    <Router history={browserHistory}>
+        <Route path="/" component={Index}></Route>
+    </Router>
+), document.querySelectorAll('.main')[0]);
diff --git a/static/js/components/Header.js b/static/js/components/Header.js
@@ -0,0 +1,34 @@
+/**
+ * 头部
+ */
+
+export default class Header extends React.Component {
+    constructor() {
+        super();
+    }
+
+    render() {
+        return (
+            <header className="g-header">
+                <div className="setting">设置</div>
+                <div className="quit">退出</div>
+            </header>
+        );
+    }
+
+    componentWillMount(){
+
+    }
+
+    getDateDisplayStatus(){
+        
+    }
+
+    componentWillReceiveProps(){
+        
+    }
+
+    componentDidMount(){
+        
+    }
+}
diff --git a/static/js/modules/index.js b/static/js/modules/index.js
@@ -0,0 +1,31 @@
+/**
+ * 
+ */
+
+import Header from '../components/Header';
+
+export default class Index extends React.Component {
+
+    constructor() {
+        super();
+    }
+
+    render() {
+        return (
+            <div>
+                <div className="g-content">
+                    <Header/>
+                    <div className="g-content-main">
+                        {this.props.children}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    componentDidMount () {
+
+    }
+
+}
+
diff --git a/static/style/components/tab.scss b/static/style/components/tab.scss
@@ -0,0 +1,6 @@
+@charset "utf-8";
+
+h1 {
+    font-size: 14px;
+    color: #333;
+}
diff --git a/static/style/componets/tab.scss b/static/style/componets/tab.scss
diff --git a/static/style/modules/pageA.scss b/static/style/modules/pageA.scss
@@ -0,0 +1,7 @@
+@charset "utf-8";
+
+@import "../components/tab.scss";
+
+body {
+    background: #ccc;
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -20,15 +20,13 @@ module.exports = {
     devtool: "source-map",
     //获取项目入口js文件
     entry: {
-        libs: './static/js/common.js',
-        index: './static/js/index.js',
-        admin: './static/js/admin.js'
+        index: './static/js/app.js'
     },
     output: {
         //文件输出目录
         path: Path.join(__dirname, 'build'),
         //用于配置文件发布路径，如CDN或本地服务器
-        publicPath: '/static/',
+        publicPath: '/build/',
         //根据入口文件输出的对应多个文件名
         filename: '[name].js'
         // filename: '[name]@[hash].js'
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
@@ -22,21 +22,19 @@ module.exports = {
     //获取项目入口js文件
     entry: {
         //添加入口，以及HMR inline
-        libs: webpackHMR.concat('./static/js/common.js'),
-        index: webpackHMR.concat('./static/js/index.js'),
-        admin: webpackHMR.concat('./static/js/admin.js')
+        index: webpackHMR.concat('./static/js/app.js')
     },
     output: {
         //文件输出目录
         path: Path.join(__dirname, 'build'),
         //用于配置文件发布路径，如CDN或本地服务器
-        publicPath: '/static/',
+        publicPath: '/build/',
         //根据入口文件输出的对应多个文件名
         filename: '[name].js'
     },
     resolve: {
         alias: {
-            'Styles': Path.join(__dirname, 'static', 'style')
+            'style': Path.join(__dirname, 'static', 'style')
         },
         extensions: ['', '.js', '.scss', '.json', '.jsx', '.css']
     },
