using webpack with react jsx babel es6 and sass - qianxueseng-com/guides GitHub Wiki

Using Webpack with React/JSX, Babel/ES6 and SASS

Repo is here

webpack.config.js

module.exports = {
  // read this js file to start
  entry: './src/js/index.js',

  // generate the output js file with the following options
  output: {
    // this is used to generate URLs
    publicPath: 'http://localhost:8080/',
    filename: 'build/bundle.js'
  },

  // generate source map
  devtool: 'source-map',

  module: {
    // a list of loaders: https://webpack.github.io/docs/list-of-loaders.html
    loaders: [

      // transforms JSX and ES6+ into normal js files
      // use babel-loader for all *.js and *.jsx files
      // using three presets: react, es2015, stage-0
      // https://babeljs.io/docs/plugins/
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: [
          'babel?presets[]=stage-0,presets[]=react,presets[]=es2015'
        ]
      },

      // load CSS
      // the order is important here
      // style loader takes CSS and actually inserts it into the page
      //     so that the styles are active on the page
      // css loader takes a CSS file and returns the CSS with
      //     imports and url(...) resolved via webpack's require functionality
      //     it doesn't actually do anything with the returned CSS
      // sass loader converst sass to css files
      {
        test: /\.scss$/,
        include: /src/,
        loaders: [
          'style',
          'css',
          'sass'
        ]
      },

      // load images
      // url loader works like the file loader, but can return a Data Url
      //     if the file is smaller than a limit.
      // img loader minifis PNG, JPEG, GIF and SVG images with imagemin
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
          'url',
          'img'
        ]
      }
    ]
  }
};

Relevant part in package.json

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack-server": "webpack-dev-server --hot --progress --colors",
    "web-server": "http-server -p 3000 .",
    "start": "npm run webpack-server & npm run web-server"
  },
"devDependencies": {
    "babel-core": "^6.3.21",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "css-loader": "^0.23.0",
    "eslint": "^1.10.3",
    "eslint-config-google": "^0.3.0",
    "eslint-plugin-react": "^3.13.1",
    "file-loader": "^0.8.5",
    "http-server": "^0.8.0",
    "img-loader": "^1.2.0",
    "node-sass": "^3.2.0",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "sass-loader": "^3.1.2",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.6",
    "webpack": "^1.11.0",
    "webpack-dev-server": "^1.10.1"
  }
}

References: