Skip to content

Instantly share code, notes, and snippets.

@tmcw
Created May 17, 2016 15:51
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tmcw/405086f853560f8a017fefdcb949cb49 to your computer and use it in GitHub Desktop.
Save tmcw/405086f853560f8a017fefdcb949cb49 to your computer and use it in GitHub Desktop.
const webpack = require('webpack');
const path = require('path');
/**
* Mapbox GL JS example webpack configuration. This demonstrates the options
* you'll need to add to your existing webpack configuration in order to successfully
* use Mapbox GL JS.
*
* This configuration refers to specific paths, especially in its configuration
* of the brfs transform. You'll likely need to change these paths so that
* they point at the correct file in Mapbox GL JS.
*
* Additional dependencies:
*
* npm install --save transform-loader
* npm install --save json-loader
* npm install --save webworkify-webpack
*
* Why these dependencies?
*
* json-loader
* By default, browserify and node allow you to use the `require` method
* with JSON files. Webpack doesn't have this built-in, so we include
* the json loader.
*
* transform-loader
* Mapbox GL JS uses the brfs browserify transform to allow it to use
* the fs.readFileSync method in order to load its shaders for WebGL. Adding
* the transform loader lets webpack use brfs as well.
*
* webworkify-webpack
* Mapbox GL JS uses the webworkify module by default, and that module
* does things very specific to browserify's module loading system. In this
* configuration, we alias webworkify to webworkify-webpack to add webpack
* support.
*/
module.exports = {
entry: './test.js',
output: {
path: './',
filename: 'test.bundle.js',
},
resolve: {
alias: {
'webworkify': 'webworkify-webpack'
}
},
module: {
loaders: [{
test: /\.json$/,
loader: 'json-loader'
}, {
test: /\.js$/,
include: path.resolve(__dirname, 'js/render/painter/use_program.js'),
loader: 'transform/cacheable?brfs'
}],
postLoaders: [{
include: /node_modules\/mapbox-gl/,
loader: 'transform',
query: 'brfs'
}]
}
}
@elvnvle
Copy link

elvnvle commented Jan 22, 2018

Note to the future people who find this; it's not a complete config. Look here if you use uglify: mapbox/mapbox-gl-js#4359 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment