Skip to content

Instantly share code, notes, and snippets.

@tsingson

tsingson/app.jsx

Created May 22, 2015 16:52
Show Gist options
  • Save tsingson/f148d96f34a15234b500 to your computer and use it in GitHub Desktop.
Save tsingson/f148d96f34a15234b500 to your computer and use it in GitHub Desktop.
Download ZIP
webpack-babel-react
Raw
app.jsx
import "./index.html";
import "./css/app.css";
var React = require('react');
var TodoApp = require('./components/TodoApp.react');
React.render(
<TodoApp />,
document.getElementById('app')
);
Raw
index.html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Boilerplate for react with ES6 and webpack</title>
<link type="text/css" rel="stylesheet" media="all" href="css/app.<%= version %>.css" />
</head>
<body>
<div id="app"></div>
<script src="js/app.<%= version %>.js"></script>
</body>
</html>
Raw
package.json
{
"name": "react-seed",
"version": "0.0.9",
"repository": "https://github.com/tsingson/refluxjs-golang-seed",
"config": {
"build_dir": "./build",
"dev_port": 8000
},
"scripts": {
"env": "env",
"prerelease": "npm test",
"prestart": "npm install",
"pretest": "npm run lint",
"prewebpack": "npm run clean",
"clean": "rm -rf $npm_package_config_build_dir && mkdir $npm_package_config_build_dir",
"start": "NODE_ENV=development node dev-server",
"webpack": "webpack --colors --progress --config ./webpack.config.js",
"start-dev-server": "webpack-dev-server --output-pathinfo --inline",
"build": "NODE_ENV=production npm run webpack",
"lint": "eslint --ext .js --ext .jsx ./app && echo No linting errors.",
"test": "jest"
},
"dependencies": {
"axios": "^0.5.4",
"classnames": "^1.2.0",
"flux": "^2.0.1",
"keymirror": "^0.1.1",
"normalize.css": "^3.0.3",
"object-assign": "^2.0.0",
"react": "^0.13.2",
"react-router": "^0.13.2"
},
"devDependencies": {
"autoprefixer-core": "^5.1.11",
"babel-core": "^5.1.11",
"babel-jest": "^5.0.1",
"babel-loader": "^5.0.0",
"babel-runtime": "^5.1.11",
"concat-stream": "^1.4.8",
"css-loader": "^0.10.1",
"eslint": "^0.19.0",
"eslint-plugin-react": "^2.1.1",
"extract-text-webpack-plugin": "^0.5.0",
"file-loader": "^0.8.1",
"html-loader": "^0.2.3",
"jest-cli": "^0.4.0",
"json-loader": "^0.5.1",
"lodash": "^3.7.0",
"opn": "^1.0.1",
"postcss-loader": "^0.4.0",
"react-hot-loader": "^1.2.5",
"style-loader": "^0.10.2",
"template-html-loader": "0.0.3",
"webpack": "^1.8.8",
"webpack-dev-server": "^1.8.2"
},
"engines": {
"node": ">=0.10.0"
},
"jest": {
"scriptPreprocessor": "./jest-preprocessor.js",
"testPathDirs": [
"./app"
],
"testFileExtensions": [
"js"
],
"moduleFileExtensions": [
"js",
"json",
"jsx"
],
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react"
]
},
"eslintConfig": {
"env": {
"browser": true,
"node": true,
"es6": true
},
"ecmaFeatures": {
"modules": true,
"jsx": true
},
"globals": {
"jest": true,
"describe": true,
"it": true,
"expect": true
},
"plugins": [
"react"
],
"rules": {
"strict": true,
"indent": [
2,
2
],
"quotes": [
2,
"single"
],
"react/display-name": 0,
"react/jsx-quotes": 1,
"react/jsx-no-undef": 1,
"react/jsx-sort-props": 1,
"react/jsx-uses-react": 1,
"react/jsx-uses-vars": 1,
"react/no-did-mount-set-state": 1,
"react/no-did-update-set-state": 1,
"react/no-multi-comp": 1,
"react/no-unknown-property": 1,
"react/prop-types": 1,
"react/react-in-jsx-scope": 1,
"react/self-closing-comp": 1,
"react/wrap-multilines": 1
}
}
}
Raw
webpack.config.js
var path = require('path');
var util = require('util');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var LessPluginCleanCSS = require('less-plugin-clean-css');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer-core');
var pkg = require('./package.json');
var cssBundle = path.join('css', util.format('[name].%s.css', pkg.version));
var jsBundle = path.join('js', util.format('[name].%s.js', pkg.version));
var cssExtractTextPlugin = new ExtractTextPlugin(cssBundle, {
allChunks: true
});
var plugins = [
new webpack.optimize.OccurenceOrderPlugin(),
cssExtractTextPlugin
];
plugins.push(
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.DedupePlugin(),
//new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
new webpack.NoErrorsPlugin()
);
var loaders = [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['babel-loader?optional=runtime']
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')
},
{
test: /\.jpe?g$|\.gif$|\.png$|\.ico|\.svg$|\.woff$|\.ttf$/,
loader: 'file-loader?name=[path][name].[ext]'
},
{
test: /\.json$/,
exclude: /node_modules/,
loaders: ['json-loader']
},
{
test: /\.html$/,
loader: [
'file-loader?name=[path][name].[ext]',
'template-html-loader?' + [
'raw=true',
'engine=lodash',
'version=' + pkg.version
].join('&')
].join('!')
}
];
var entry = {
app: ['./app.jsx']
};
var config = {
context: path.join(__dirname, 'app'),
target: 'web',
entry: entry,
output: {
path: path.resolve(pkg.config.build_dir),
publicPath: '/build/',
filename: jsBundle,
pathinfo: false
},
module: {
loaders: loaders,
lessLoader: {
lessPlugins: [
new LessPluginCleanCSS({advanced: true})
]
}
},
postcss: [
autoprefixer
],
plugins: plugins,
resolve: {
extensions: ['', '.js', '.json', '.jsx']
},
devServer: {
contentBase: path.resolve(pkg.config.build_dir),
hot: true,
noInfo: false,
inline: true,
stats: {colors: true}
}
};
module.exports = config;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment