Webpack + ES6 + Sass + Live reload

es6_webpack.config.js

//FOR ES6 ONLY
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry : {
        'js/out.js': './js/app.js',
        'css/style.css~': './css/main.scss'
    },
    output : {
        path: __dirname+'/',
        filename: '[name]'
    },
    devServer: {
        inline: true,
        contentBase: './',
        port: 3001
    },
    watch: true,
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: { presets: ['es2015'] }
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })

            },
            {
                test: /\.(png|jpg|gif)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {}
                    }
                ]
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('./css/style.css')

    ]
};

package.json

{
  "name": "ReactAndEs6WebPackBasicPackages",
  "version": "1.0.0",
  "description": "## Basic config to start working with ES6 and React",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "wp": "./node_modules/.bin/webpack",
    "serve": "./node_modules/.bin/webpack-dev-server --hot"
  },
  "author": "Dariusz Luber",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.5",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "react": "^15.4.0",
    "react-dom": "^15.4.0",
    "react-router": "^3.0.3",
    "whatwg-fetch": "^2.0.3",
    "webpack": "^3.5.5",
    "webpack-dev-server": "^2.7.1"
  }
}

react_catalog_structure.txt

- src
    - jsx
        - template
            - Main.jsx
        - search
            - Form.jsx
        - list
            - CatList.jsx
            - Cat.jsx
    - scss
        - partials
         -
         -
- dist
    - js -> out.js
    - css -> main.css
    - images
- node_modules //tylko pakiety produkcyjne -> $ npm i --prod
- package.json
- webpack.config.js
- index.html

react_webpack.config.js

//FOR REACT
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: ["whatwg-fetch","./src/jsx/App.jsx","./src/scss/style.scss"],
    output: { filename: "./dist/js/out.js" },
    devServer: {
        inline: true,
        contentBase: './',
        port: 3001
    },
    watch: true,

    module: {
        loaders: [
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: { presets: ['es2015', 'stage-2', 'react'] }
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })

            },
            {
                test: /\.(png|jpg|gif)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {}
                    }
                ]
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('./dist/css/style.css')

    ]
};

Webpack config for Sass+ES6+LiveReload.md

#Webpack + ES6 + Sass + Live reload

Basic example of webpack config to work with sass, es6 and live reload.

To get live reload working you need:

• get package.json and webpack.config.js to your project foldee
• run in terminal npm install
• add this script <script src="http://localhost:35729/livereload.js"></script> to your index.html
• create src folder and src files
• run in terminal webpack

Don't forget to add final css and js file to your site ;)

That's it :D