React+webpack 部署概要

林氏智造 于 2016-12-01 发布 3454 人已阅

React+webpack 组合已经成为开发react的经典搭配,把常用的webpack配置文件和一些react的常用代码规范记录下方便以后开发使用

webpack 自动化配置代码

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var autoprefixer = require('autoprefixer');

var DIST_DIR = path.resolve(__dirname, 'dist');
var SRC_DIR = path.resolve(__dirname, 'src');

var config = {
    entry: {
        app: SRC_DIR + '/main.jsx'
    },
    output: {
        path: DIST_DIR,
        filename: '[name].js'
    },
    module: {
        loaders: [

            {
                test: /.jsx?/,
                include: SRC_DIR,
                loader: 'babel'
            },

            {
                test: /.json$/,
                loader: 'json'
            },

            {
                test: /.css$/,
                loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss')
            },

            {
                test: /.(png|jpe?g|gif|svg)(?.*)?$/,
                loader: 'url',
                query: {
                    limit: 10000,
                    name: '[path][name].[ext]'
                }
            },

            {
                test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
                loader: 'url',
                query: {
                    limit: 10000
                }
            }

        ]
    },
    postcss: [
        autoprefixer({browsers: ['last 4 versions']})
    ],
    plugins: [

        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true
        }),

        new ExtractTextPlugin("styles.css"),

        new webpack.optimize.UglifyJsPlugin({
            compressor: {
                warnings: false, //设置不显示
            },
        }),

        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify("production")
            }
        })

    ]
};

module.exports = config;

React组件规范

import React from 'react';
import LogoImg from '../assets/img/logo.png';
import { Link , IndexLink} from 'react-router'
import WeUI from 'react-weui';

const {Cells,
    CellsTitle,
    Cell,
    CellHeader,
    CellBody,
    CellFooter} = WeUI;

const IndexView = React.createClass({

    getInitialState: function () {
        return { count: 0 };
    },
    handleClick: function () {
        this.setState({
            count: this.state.count + 1,
        });
    },
    render: function () {
        return (
            <div>
               模板代码
            </div>
        );
    }
});

export default IndexView;

react-router 配置

import React from 'react'
import {render} from 'react-dom'
import { Router, Route, Link , browserHistory, IndexRoute , RouteContext } from 'react-router'
import IndexView from './views/index.jsx'
import UserView from './views/user.jsx'
import ListView from './views/list.jsx'
import 'weui';

const App = React.createClass({

    mixins: [ RouteContext ],

    render() {
        return (
            <div>
                {this.props.children}
            </div>
        )
    }
})

function requireAuth(nextState, replaceState) {
    if (false) {
        replaceState({ nextPathname: nextState.location.pathname }, '/');
    }
}

render((
    <Router history={browserHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={IndexView} />
            <Route onEnter={requireAuth} path="user" getComponent={(location, cb) => {
                // 做一些异步操作去查找组件
                cb(null, UserView)
            }}/>
            <Route path="list/:count" component={ListView} />
        </Route>
    </Router>
), document.body)

package.json

{
  "name": "react",
  "version": "1.0.0",
  "description": "by react",
  "author": "linji",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --hot",
    "build": "webpack -p"
  },
  "dependencies": {
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-router": "^3.0.0",
    "react-weui": "^0.4.1",
    "weui": "^0.4.3"
  },
  "devDependencies": {
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-register": "^6.0.0",
    "connect-history-api-fallback": "^1.1.0",
    "css-loader": "^0.26.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^2.24.1",
    "http-proxy-middleware": "^0.17.2",
    "json-loader": "^0.5.4",
    "opn": "^4.0.2",
    "ora": "^0.3.0",
    "postcss-easysprites": "^0.1.7",
    "postcss-loader": "^1.1.1",
    "postcss-sprites": "^4.1.0",
    "react-hot-loader": "^1.3.1",
    "shelljs": "^0.7.4",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.2",
    "webpack-dev-middleware": "^1.8.3",
    "webpack-hot-middleware": "^2.12.2",
    "webpack-merge": "^0.14.1"
  }
}

标签

您可能感兴趣的文章

如何优雅的选择字体(font-family)

当前项目对字体要求很高,之前对font-family这个属性没怎么仔细去研究它,现在整理了一个通用方案适合大多数网站使用。

gulp前端自动化部署方案

gulp 前端自动化代码,根据自己的项目需求编写,包括压缩合并css,压缩合并js,雪碧图,版本号插入等功能

纯CSS制作各种图形

用图片做图标会加大页面的大小,现在能用CSS写图标就用CSS写,维护起来也方便加载速度也快