Partial Webpack config set up for use with Mapbox GL JS

Webpack config for Mapbox GL JS

// This is not a great example of a working webpack config, but works for me for use with Mapbox GL JS

var webpack = require('webpack');
var path = require('path');
var fs = require('fs');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var StatsPlugin = require('stats-webpack-plugin');
var loadersByExtension = require('./loaders-by-extension');


var projectRoot = path.join(__dirname, '..');
var distPath = path.resolve(projectRoot, 'dist');
var appRoot = path.join(projectRoot, 'src/web');

module.exports = function(opts) {

  var entry = {
    main: opts.prerender ? path.join(appRoot, 'mainApp') : path.join(appRoot, 'mainApp')
  }

  var loaders = {
    'jsx': opts.hotComponents ? [ 'react-hot-loader', 'babel-loader' ] : 'babel-loader',
    'js': {
      loader: 'babel-loader',
      include: [appRoot]
    },
    'json': 'json-loader',
    'txt': 'raw-loader',
    'png|jpg|jpeg|gif|svg': 'url-loader?limit=10000',
    'woff|woff2': 'url-loader?limit=100000',
    'ttf|eot': 'file-loader',
    'wav|mp3': 'file-loader',
    'html': 'html-loader',
    'md|markdown': [ 'html-loader', 'markdown-loader' ]
  }

  var cssLoader = opts.minimize ? 'css-loader' : 'css-loader?localIdentName=[path][name]---[local]---[hash:base64:5]'

  var stylesheetLoaders = {
    'css': cssLoader,
    'less': [ cssLoader, 'less-loader' ],
    'styl': [ cssLoader, 'stylus-loader' ],
    'scss|sass': [ cssLoader, 'sass-loader' ]
  }

  var additionalLoaders = [
    {
      test: /\.js$/,
      include: path.resolve(projectRoot, 'node_modules/mapbox-gl/js/render/painter/use_program.js'),
      loaders: ['transform/cacheable?brfs']
    }
  ]

  var aliasLoader = {

  }

  var externals = [

  ]

  var modulesDirectories = [ 'node_modules' ]

  var publicPath = opts.devServer
                 ? 'http://localhost:2992/dist/'
                 : '/dist/'


  var output = {
    path: projectRoot + '/dist/',
    filename: 'bundle.js',
    publicPath: publicPath,
    contentBase: projectRoot + '/public/',
    libraryTarget: 'commonjs2'
  }

  var excludeFromStats = [
    /node_modules[\\\/]react(-router)?[\\\/]/
  ]


  var plugins = [
    new webpack.PrefetchPlugin('react'),
    new webpack.PrefetchPlugin('react/lib/ReactComponentBrowserEnvironment')
  ]

  if (opts.prerender) {
    plugins.push(new StatsPlugin(path.join(distPath, 'stats.prerender.json'), {
      chunkModules: true,
      exclude: excludeFromStats
    }))
    aliasLoader['react-proxy$'] = 'react-proxy/unavailable'
    aliasLoader['react-proxy-loader$'] = 'react-proxy-loader/unavailable'
    externals.push(
      /^react(\/.*)?$/,
      /^reflux(\/.*)?$/,
      'superagent',
      'async'
    )
    plugins.push(new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }))
  } else {
    plugins.push(new StatsPlugin(path.join(distPath, 'stats.json'), {
      chunkModules: true,
      exclude: excludeFromStats
    }));
  }

  if (opts.commonsChunk) {
    plugins.push(new webpack.optimize.CommonsChunkPlugin('commons', 'commons.js' + (opts.longTermCaching && !opts.prerender ? '?[chunkhash]' : '')))
  }

  Object.keys(stylesheetLoaders).forEach(function(ext) {
    var stylesheetLoader = stylesheetLoaders[ext]
    if (Array.isArray(stylesheetLoader)) stylesheetLoader = stylesheetLoader.join('!')
    if (opts.prerender) {
      stylesheetLoaders[ext] = stylesheetLoader.replace(/^css-loader/, 'css-loader/locals')
    } else if (opts.separateStylesheet) {
      stylesheetLoaders[ext] = ExtractTextPlugin.extract('style-loader', stylesheetLoader)
    } else {
      stylesheetLoaders[ext] = 'style-loader!' + stylesheetLoader
    }
  })

  if (opts.separateStylesheet && !opts.prerender) {
    plugins.push(new ExtractTextPlugin('[name].css' + (opts.longTermCaching ? '?[contenthash]' : '')))
  }

  return {
    entry: entry,
    output: output,
    module: {
      loaders: [].concat(loadersByExtension(loaders)).concat(loadersByExtension(stylesheetLoaders)).concat(additionalLoaders),
      postLoaders: [{
        include: /node_modules\/mapbox-gl/,
        loader: 'transform',
        query: 'brfs'
      }],
    },
    devtool: opts.devtool,
    debug: opts.debug,
    resolve: {
      root: appRoot,
      modulesDirectories: modulesDirectories,
      extensions: ['', '.js', '.jsx', '.json'],
      alias: {
        webworkify: 'webworkify-webpack'
      }
    },
    plugins: plugins,
    devServer: {
      stats: {
        cached: false,
        exclude: excludeFromStats
      }
    }
  }
}