├── .eslintrc
├── .gitignore
├── README.md
├── app
├── components
│ └── index.js
├── index.js
└── style.css
├── index.html
├── package.json
└── webpack.config.js
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "airbnb-base",
3 | "parser": "babel-eslint",
4 | "parserOptions": {
5 | "ecmaFeatures": {
6 | "jsx": true
7 | }
8 | },
9 | "env": {
10 | "node": true,
11 | "browser": true
12 | },
13 | "plugins": [
14 | "babel",
15 | "react"
16 | ],
17 | "rules": {
18 | "react/jsx-uses-react": "error",
19 | "react/jsx-uses-vars": "error",
20 | "import/no-extraneous-dependencies": ["error", {
21 | "devDependencies": ['*.config.js']
22 | }],
23 | "no-multi-spaces": [1, {
24 | "exceptions": { "VariableDeclaration": true, "ImportDeclaration": true }
25 | }]
26 | }
27 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /dist
2 | .DS_Store
3 | /node_modules
4 | npm-debug.log
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Webpack React 0
2 |
3 | This is a simple boiler plate project that sets up a base project for anyone who wants to use it. It has the basic webpack config and react setup.
4 |
5 | The idea is it can grow from here.
6 |
7 | ## Development Only
8 |
9 | Currently This config is development only, if you want to configure it for production feel free to add your own.
10 |
11 | ## Usage
12 |
13 | Simply fork and clone this repository and run.
14 |
15 | ``` shell
16 | npm install
17 | npm run dev
18 | ```
--------------------------------------------------------------------------------
/app/components/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | class HelloWorld extends React.Component {
4 | render() {
5 | return(
6 |
7 | Hello World!
8 |
9 | );
10 | }
11 | }
12 |
13 | export default HelloWorld;
14 |
--------------------------------------------------------------------------------
/app/index.js:
--------------------------------------------------------------------------------
1 | import './style.css';
2 |
3 |
4 | import React from 'react';
5 | import { render } from 'react-dom';
6 |
7 |
8 | import HelloWorld from './components';
9 |
10 | render(, document.getElementById('app'));
11 |
--------------------------------------------------------------------------------
/app/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | color: red;
3 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "web-starter-kit",
3 | "version": "1.0.0",
4 | "private": true,
5 | "description": "",
6 | "main": "index.js",
7 | "scripts": {
8 | "dev": "webpack-dashboard -- webpack-dev-server --watch --progress --color --config ./webpack.config.js"
9 | },
10 | "author": "",
11 | "license": "MIT",
12 | "devDependencies": {
13 | "autoprefixer": "^6.4.1",
14 | "babel-core": "^6.14.0",
15 | "babel-eslint": "^6.1.2",
16 | "babel-loader": "^6.2.5",
17 | "babel-plugin-transform-decorators-legacy": "^1.3.4",
18 | "babel-plugin-transform-runtime": "^6.12.0",
19 | "babel-preset-es2015": "^6.14.0",
20 | "babel-preset-react": "^6.11.1",
21 | "babel-preset-stage-0": "^6.5.0",
22 | "css-loader": "^0.24.0",
23 | "eslint": "^3.4.0",
24 | "eslint-config-airbnb": "^10.0.1",
25 | "eslint-config-airbnb-base": "^5.0.3",
26 | "eslint-plugin-babel": "^3.3.0",
27 | "eslint-plugin-import": "^1.14.0",
28 | "eslint-plugin-jsx-a11y": "^2.2.0",
29 | "eslint-plugin-react": "^6.2.0",
30 | "extract-text-webpack-plugin": "^1.0.1",
31 | "file-loader": "^0.9.0",
32 | "image-webpack-loader": "^2.0.0",
33 | "node-sass": "^3.8.0",
34 | "path": "^0.12.7",
35 | "postcss-loader": "^0.11.1",
36 | "sass-loader": "^4.0.1",
37 | "style-loader": "^0.13.1",
38 | "url-loader": "^0.5.7",
39 | "webpack": "^1.13.2",
40 | "webpack-dashboard": "^0.1.8",
41 | "webpack-dev-server": "^1.15.0"
42 | },
43 | "dependencies": {
44 | "react": "^15.3.1",
45 | "react-dom": "^15.3.1"
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
2 |
3 | module.exports = {
4 | entry: {
5 | app: './app',
6 | },
7 | output: {
8 | path: __dirname,
9 | filename: '[name].js',
10 | chunkFileName: '[id].js',
11 | },
12 | module: {
13 | loaders: [
14 | {
15 | test: /\.css$/,
16 | loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
17 | },
18 | {
19 | test: /\.(js|jsx)$/,
20 | exclude: /(node_modules|bower_components)/,
21 | loader: 'babel',
22 | query: {
23 | presets: ['es2015', 'stage-0', 'react'],
24 | plugins: ['transform-runtime'],
25 | },
26 | },
27 | ],
28 | },
29 | plugins: [
30 | new ExtractTextPlugin('[name].css', {
31 | allChunks: true,
32 | }),
33 | ],
34 | };
35 |
--------------------------------------------------------------------------------