├── src
└── script
│ ├── components
│ ├── button.scss
│ └── button.jsx
│ └── index.jsx
├── .gitignore
├── README.md
├── index-template.ejs
├── index.html
├── LICENSE
├── package.json
└── webpack.config.js
/src/script/components/button.scss:
--------------------------------------------------------------------------------
1 | .glyphicon-refresh {
2 | color: aquamarine;
3 | }
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Dependency directories
2 | node_modules
3 | bower_components
4 |
5 | # Bundle directory
6 | dist/
7 |
8 | .DS_Store
9 | npm-debug.log
10 |
--------------------------------------------------------------------------------
/src/script/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import Button from './components/button';
4 |
5 | ReactDOM.render(
6 | , document.getElementById('content'));
7 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # webpack-react
2 | A sample project to demonstrate bundling ES6, React, SASS and Bootstrap with Webpack
3 |
4 | Example code for my blog post - http://andrejgajdos.com/setting-up-webpack-for-es6-react-sass-and-bootstrap/
5 |
6 | ## License
7 |
8 | MIT © [Andrej Gajdos](http://andrejgajdos.com)
9 |
--------------------------------------------------------------------------------
/index-template.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | <%= htmlWebpackPlugin.options.title %>
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/script/components/button.jsx:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 |
3 | import './button.scss';
4 | import 'bootstrap';
5 | import "bootstrap/dist/css/bootstrap.css";
6 |
7 | export default class Button extends Component {
8 | render() {
9 | return ;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Webpack-react
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Andrej Gajdos
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-react",
3 | "version": "0.0.0",
4 | "description": "Bundling ES6, React, SASS and Bootstrap with Webpack",
5 | "homepage": "http://github.com/AndrejGajdos/webpack-react.git",
6 | "repository": "git://github.com/AndrejGajdos/webpack-react.git",
7 | "author": "Andrej Gajdos (http://andrejgajdos.com/)",
8 | "main": "index.jsx",
9 | "scripts": {
10 | "build": "webpack -d",
11 | "start": "npm run serve | npm run dev",
12 | "serve": "./node_modules/.bin/http-server -p 8080",
13 | "dev": "webpack-dev-server -d --progress --colors --port 8090"
14 | },
15 | "keywords": [
16 | "webpack",
17 | "react",
18 | "es6",
19 | "bootstrap"
20 | ],
21 | "author": "Andrej Gajdos",
22 | "license": "MIT",
23 | "devDependencies": {
24 | "autoprefixer": "^6.3.7",
25 | "babel": "^6.5.2",
26 | "babel-core": "^6.5.2",
27 | "babel-loader": "^6.2.2",
28 | "babel-preset-es2015": "^6.5.0",
29 | "babel-preset-react": "^6.5.0",
30 | "bootstrap": "^3.3.6",
31 | "css-loader": "^0.23.1",
32 | "file-loader": "^0.8.5",
33 | "html-webpack-plugin": "^2.8.1",
34 | "http-server": "^0.8.5",
35 | "jquery": "^2.2.0",
36 | "less": "^2.6.0",
37 | "less-loader": "^2.2.2",
38 | "node-sass": "^3.4.2",
39 | "npm-install-webpack-plugin": "^2.0.2",
40 | "postcss": "^5.0.15",
41 | "postcss-loader": "^0.8.1",
42 | "react": "^0.14.7",
43 | "react-dom": "^0.14.7",
44 | "sass-loader": "^3.1.2",
45 | "style-loader": "^0.13.0",
46 | "url-loader": "^0.5.7",
47 | "webpack": "^1.12.13",
48 | "webpack-dev-server": "^1.14.1",
49 | "webpack-merge": "^0.7.3"
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var merge = require('webpack-merge');
3 | var HtmlWebpackPlugin = require('html-webpack-plugin');
4 | var NpmInstallPlugin = require('npm-install-webpack-plugin');
5 | var autoprefixer = require('autoprefixer');
6 |
7 | const TARGET = process.env.npm_lifecycle_event;
8 | console.log("target event is " + TARGET);
9 |
10 | var common = {
11 | cache: true,
12 | debug: true,
13 | entry: './src/script/index.jsx',
14 | resolve: {
15 | extensions: ['', '.js', '.jsx']
16 | },
17 | output: {
18 | filename: 'index.js',
19 | sourceMapFilename: '[file].map'
20 | },
21 | module: {
22 | loaders: [{
23 | test: /\.js[x]?$/,
24 | loaders: ['babel-loader?presets[]=es2015&presets[]=react'],
25 | exclude: /(node_modules|bower_components)/
26 | }, {
27 | test: /\.css$/,
28 | loaders: ['style', 'css']
29 | }, {
30 | test: /\.scss$/,
31 | loaders: ['style', 'css', 'postcss', 'sass']
32 | }, {
33 | test: /\.less$/,
34 | loaders: ['style', 'css', 'less']
35 | }, {
36 | test: /\.woff$/,
37 | loader: "url-loader?limit=10000&mimetype=application/font-woff&name=[path][name].[ext]"
38 | }, {
39 | test: /\.woff2$/,
40 | loader: "url-loader?limit=10000&mimetype=application/font-woff2&name=[path][name].[ext]"
41 | }, {
42 | test: /\.(eot|ttf|svg|gif|png)$/,
43 | loader: "file-loader"
44 | }]
45 | },
46 | plugins: [
47 | new webpack.ProvidePlugin({
48 | $: "jquery",
49 | jQuery: "jquery"
50 | })
51 | ],
52 | postcss: function() {
53 | return [autoprefixer({
54 | browsers: ['last 3 versions']
55 | })];
56 | }
57 | };
58 |
59 | if (TARGET === 'dev' || !TARGET) {
60 | module.exports = merge(common, {
61 | devtool: 'eval-source-map',
62 | devServer: {
63 | historyApiFallback: true
64 | },
65 | output: {
66 | publicPath: 'http://localhost:8090/assets'
67 | },
68 | plugins: [
69 | new NpmInstallPlugin({
70 | save: true // --save
71 | })
72 | ]
73 | });
74 | }
75 |
76 | if (TARGET === 'build') {
77 | module.exports = merge(common, {
78 | devtool: 'source-map',
79 | output: {
80 | path: './dist'
81 | },
82 | plugins: [
83 | new HtmlWebpackPlugin({
84 | title: 'Webpack-react',
85 | template: 'index-template.ejs'
86 | })
87 | ]
88 | });
89 | }
90 |
--------------------------------------------------------------------------------