webpack.config.js

const webpack = require('webpack'),
      path = require('path'),
      HtmlWebpackPlugin = require('html-webpack-plugin'),
      OpenBrowserPlugin = require('open-browser-webpack-plugin'),
      ExtractTextPlugin = require('extract-text-webpack-plugin');

const title = 'Page Title';

const _fontHelper = (mimetype) => {
  return [{
    loader: 'url-loader',
    options: {
      limit: 10000,
      mimetype
    }
  }];
};


const fontRules = [
  {
    test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
    use: _fontHelper('application/font-woff')
  }, {
    test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
    use: _fontHelper('application/font-woff')
  }, {
    test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
    use: _fontHelper('application/octet-stream')
  }, {
    test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
    use: [{
      loader: 'file-loader'
    }]
  }, {
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    use: _fontHelper('image/svg+xml')
  }
];

const sassRule = {
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    //resolve-url-loader may be chained before sass-loader if necessary
    use: [
      {
        loader: 'css-loader',
        options: {
          alias: {
            '../fonts': 'font-awesome/fonts'
          }
        }
      },
      {
        loader: 'sass-loader',
        options: {
          includePaths: [ path.resolve(__dirname, 'node_modules/bulma/'), path.resolve(__dirname, 'node_modules/font-awesome/scss/') ]
        }
      }
    ]
  })
};

const jsxRule = {
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    presets: [ 'env' ],
    plugins: [
      [ 'transform-react-jsx', {
        pragma: 'm'
      }]
     ]
  }
};

module.exports = {
  entry: {
    app: './src/index.js',
    vendor: [ 'mithril' ]
  },

  module: {
    rules: [
      sassRule,
      jsxRule,
      ...fontRules
    ]
  },

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
   },

   plugins: [
    new ExtractTextPlugin('style.css'),
    new webpack.HotModuleReplacementPlugin(), // Enable HMR
    new HtmlWebpackPlugin({ title }),
    new OpenBrowserPlugin()
  ],

  devtool: 'cheap-eval-source-map',

  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    hot: true,
    publicPath: '/',
    historyApiFallback: true,
    watchContentBase: true
  }
};

// npm i -D babel-core babel-loader babel-plugin-transform-react-jsx babel-preset-env babel-preset-es2015 bulma css-loader extract-text-webpack-plugin file-loader font-awesome html-webpack-plugin mithril node-sass npm-install-webpack-plugin open-browser-webpack-plugin sass-loader style-loader url-loader webpack webpack-dev-server