├── app ├── assets │ ├── styles │ │ ├── style.css │ │ └── compassStyle.scss │ └── images │ │ └── icon.jpg ├── index.html └── src │ ├── main.js │ └── HelloMessage.js ├── .bowerrc ├── webpack-deploy.config.js ├── webpack-dev-server.config.js ├── .gitignore ├── bower.json ├── README.md ├── dev-server.js ├── package.json └── make-webpack-config.js /app/assets/styles/style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "app/bower_components/" 3 | } 4 | -------------------------------------------------------------------------------- /app/assets/images/icon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/duncan60/react-webpack-generator/HEAD/app/assets/images/icon.jpg -------------------------------------------------------------------------------- /webpack-deploy.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require("./make-webpack-config")({ 2 | outputPath : './dist', 3 | status : 'deploy' 4 | }); -------------------------------------------------------------------------------- /webpack-dev-server.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require("./make-webpack-config")({ 2 | outputPath : __dirname, 3 | status : 'dev' 4 | }); -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ### OSX ### 2 | .DS_Store 3 | .idea 4 | us.stackdump 5 | 6 | ### Windows ### 7 | # Windows image file caches 8 | Thumbs.db 9 | ehthumbs.db 10 | npm-debug.log 11 | 12 | node_modules/ 13 | /app/bower_components 14 | dist/ 15 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "starter-diy-app", 3 | "version": "0.0.1", 4 | "authors": [ 5 | "Duncan Du " 6 | ], 7 | "dependencies": { 8 | "jquery": "~2.1.0", 9 | "bootstrap": "~3.2.0", 10 | "es5-shim": "", 11 | "es6-shim": "", 12 | "underscore": "1.7.0", 13 | "react": "~0.13.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | My project 6 | 7 | 8 | 9 |

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /app/src/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | *require css 3 | */ 4 | import 'bootstrap.css'; 5 | import '../assets/styles/compassStyle'; 6 | /* 7 | *require react 8 | */ 9 | 10 | import React from 'react'; 11 | import HelloMessage from './HelloMessage'; 12 | /* jshint ignore:start */ 13 | React.render(, document.getElementById('app')); 14 | /* jshint ignore:end */ 15 | -------------------------------------------------------------------------------- /app/assets/styles/compassStyle.scss: -------------------------------------------------------------------------------- 1 | @import "compass/css3"; 2 | $bodyColor:#E0E0E0; 3 | $fontSize:18px; 4 | 5 | body{ 6 | font-size: 12px; 7 | } 8 | p{ 9 | padding: 10px; 10 | background-color: #CCC; 11 | font-size:20px; 12 | @include border-radius(5px); 13 | } 14 | 15 | body { 16 | background : $bodyColor; 17 | font-size : $fontSize; 18 | background-image: url("../images/icon.jpg"); 19 | } 20 | h1{ 21 | transform : rotate(4deg) scale(1) skew(1deg) translate(10px); 22 | } 23 | p{ 24 | margin-top: 20px; 25 | } 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-webpack-generator 2 | generator for react and webpack 3 | 4 | ## Features 5 | 6 | * Compilation with webpack 7 | * React 0.13.^ and ES6 8 | * Stylesheets can be CSS, SASS, Compass, postcss 9 | * Generate separate css file and js plugin 10 | 11 | ##Install npm 12 | 13 | ``` text 14 | $ npm install 15 | ``` 16 | ##Install borwer 17 | 18 | ``` text 19 | $ bower install 20 | ``` 21 | ##Begin to development server 22 | 23 | ``` text 24 | $ npm run dev 25 | ``` 26 | ##deploy 27 | 28 | ``` text 29 | $ npm run deploy 30 | #create dist file , generate file in dist file 31 | ``` 32 | -------------------------------------------------------------------------------- /dev-server.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | WebpackDevServer = require('webpack-dev-server'), 3 | util = require('util'), 4 | opn = require('opn'), 5 | port = 8080, 6 | host = 'localhost', 7 | config = require('./webpack-dev-server.config.js'); 8 | 9 | var server = new WebpackDevServer( 10 | webpack(config), 11 | { 12 | contentBase: 'app', 13 | hot: true 14 | } 15 | ); 16 | 17 | server.listen(port, host, function (err) { 18 | if (err) { console.log(err); } 19 | var url = util.format('http://%s:%d', host, port); 20 | opn(url); 21 | }); -------------------------------------------------------------------------------- /app/src/HelloMessage.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | module.exports = class HelloMessage extends React.Component { 3 | constructor(props) { 4 | super(props); 5 | this.state = { 6 | msg : 'learning use Webpack and reactJs 0.13.1', 7 | tick : 0 8 | }; 9 | } 10 | onClickHandeler() { 11 | this.setState({tick : this.state.tick + 1}); 12 | } 13 | /* jshint ignore:start */ 14 | render() { 15 | return ( 16 |

17 |

Hello {this.props.name}

18 |

{this.state.msg}

19 |

{this.state.tick}

20 |

); 21 | } 22 | /* jshint ignore:end */ 23 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-react-generator", 3 | "version": "0.0.1", 4 | "description": "react 0.13 and webpack", 5 | "main": "app/main.js", 6 | "dependencies": { 7 | "react": "^0.13.1", 8 | "webpack": "^1.7.3" 9 | }, 10 | "devDependencies": { 11 | "autoprefixer-core": "^5.1.11", 12 | "babel-loader": "^4.3.0", 13 | "compass-mixins": "^0.12.3", 14 | "css-loader": "^0.9.1", 15 | "csswring": "^3.0.4", 16 | "extract-text-webpack-plugin": "^0.3.8", 17 | "file-loader": "^0.8.3", 18 | "html-webpack-plugin": "^1.1.0", 19 | "jshint-loader": "^0.8.3", 20 | "jsx-loader": "^0.12.2", 21 | "node-sass": "^2.1.1", 22 | "postcss": "^4.1.8", 23 | "postcss-loader": "^0.4.1", 24 | "postcss-nested": "^0.2.2", 25 | "react-hot-loader": "^1.2.4", 26 | "sass-loader": "^0.6.0", 27 | "style-loader": "^0.8.3", 28 | "url-loader": "^0.5.5", 29 | "util": "^0.10.3", 30 | "webpack-dev-server": "^1.7.0" 31 | }, 32 | "scripts": { 33 | "test": "webpack-dev-server --config webpack-dev-server.config.js --hot --devtool eval --progress --colors --content-base app", 34 | "dev": "node dev-server", 35 | "deploy": "webpack -p --config webpack-deploy.config.js" 36 | }, 37 | "author": "duncanDu" 38 | } 39 | -------------------------------------------------------------------------------- /make-webpack-config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'), 2 | path = require('path'), 3 | ExtractTextPlugin = require('extract-text-webpack-plugin'), 4 | HtmlWebpackPlugin = require('html-webpack-plugin'), 5 | bower_dir = __dirname + '/app/bower_components', 6 | autoprefixer = require('autoprefixer-core'), 7 | csswring = require('csswring'); 8 | module.exports = function(options) { 9 | var outputPath = options.outputPath, 10 | entry = { 11 | bundle : null, 12 | vendors : null 13 | }, 14 | vendors = [], 15 | noParse = [], 16 | loaders = [], 17 | resolve = { 18 | alias : {}, 19 | extensions : ['', '.css', '.scss', '.js'] 20 | }; 21 | var plugins = [ 22 | new webpack.ProvidePlugin({ 23 | $ : 'jquery', 24 | jQuery : 'jquery', 25 | 'windows.jQuery' : 'jquery' 26 | }), 27 | new webpack.HotModuleReplacementPlugin() 28 | ]; 29 | 30 | if (options.status === 'dev') { 31 | entry.bundle = [ 32 | 'webpack-dev-server/client?http://localhost:8080', 33 | 'webpack/hot/only-dev-server', 34 | './app/src/main' 35 | ]; 36 | loaders.push( 37 | { test : /\.(woff|ttf|svg|eot|jpg|png|git)$/, loader: 'url-loader' }, 38 | { test : /\.(js|jsx)$/, loader:'react-hot!babel', include: path.join(__dirname, 'app/src/')}, 39 | { test : /\.scss$/, loader:'style!css!postcss!sass?includePaths[]=' + path.resolve(__dirname, './node_modules/compass-mixins/lib') }, 40 | { test : /\.css$/, loader:'style!css' } 41 | ); 42 | } 43 | 44 | 45 | if (options.status === 'deploy') { 46 | entry.bundle = './app/src/main'; 47 | loaders.push( 48 | { test : /\.(woff|ttf|svg|eot|jpg|png|git)$/, loader: 'url-loader' }, 49 | { test : /\.(js|jsx)$/, loader:'babel', include: path.join(__dirname, 'app/src/')}, 50 | { test : /\.scss$/, loader:ExtractTextPlugin.extract('style','css!postcss!sass?includePaths[]=' + path.resolve(__dirname, './node_modules/compass-mixins/lib')) }, 51 | { test : /\.css$/, loader: ExtractTextPlugin.extract('style', 'css') } 52 | ); 53 | plugins.push( 54 | new HtmlWebpackPlugin({ 55 | filename : 'index.html', 56 | template : 'app/index.html' 57 | }), 58 | new ExtractTextPlugin('assets/styles/[name].css'), 59 | new webpack.optimize.UglifyJsPlugin(), 60 | new webpack.optimize.DedupePlugin(), 61 | new webpack.DefinePlugin({ 62 | "process.env" : { 63 | NODE_ENV : JSON.stringify("production") 64 | } 65 | }), 66 | new webpack.NoErrorsPlugin() 67 | ); 68 | } 69 | 70 | 71 | var addVendor = function (type, name, path) { 72 | resolve.alias[name] = path; 73 | noParse.push(new RegExp('^' + name + '$')); 74 | if (type === 'js'){ 75 | vendors.push(name); 76 | entry.vendors = vendors; 77 | } 78 | }; 79 | //Vendor style 80 | addVendor('css', 'bootstrap.css', bower_dir + '/bootstrap/dist/css/bootstrap.min.css'); 81 | //Vendor plugin 82 | addVendor('js', 'jquery', bower_dir + '/jquery/dist/jquery.min.js'); 83 | addVendor('js', 'bootstrap', bower_dir + '/bootstrap/dist/js/bootstrap.min.js'); 84 | 85 | return{ 86 | entry : entry, 87 | output : { 88 | path : outputPath, 89 | filename : 'js/[name].js' 90 | }, 91 | module : { 92 | noParse : noParse, 93 | loaders : loaders 94 | }, 95 | postcss : [autoprefixer, csswring], 96 | resolve : resolve, 97 | plugins : plugins 98 | } 99 | } 100 | 101 | --------------------------------------------------------------------------------