ctcrnitv
8/21/2017 - 9:33 PM

standard React webpack.config.js notes

standard React webpack.config.js notes

'use strict';

//to-do
const HtmlPlugin = require('html-webpack-plugin');
//to extract sass loader
const ExtractPlugin = require('extract-text-webpack-plugin');

module.exports = {
  //enter app where reactjs Components live
  entry: `${__dirname}/src/main.js`,
  //options how/where to output bundles
  output: {
    path: `${__dirname}/build`,
    publicPath: '/',
    filename: 'bundle-[hash].js'
  },
  //how to treat modules in project
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.scss$/,
        loader: ExtractPlugin.extract(['css-loader', 'sass-loader'])
      }
    ]
  },
  //customize build for js and css modules
  plugins: [
    new HtmlPlugin({ template: `${__dirname}/src/index.html` }),
    new ExtractPlugin('bundle-[hash].css')
  ],
  //server configurations
  devServer: {
    hot: true,
    inline: true
  },
  //how to generate source maps for compressed debugging
  devtool: 'cheap-module-eval-source-map'
}