In-development webpack configuration for Mapbox GL JS.
Will resolve mapbox/mapbox-gl-js#1649 when it is confirmed.
In-development webpack configuration for Mapbox GL JS.
Will resolve mapbox/mapbox-gl-js#1649 when it is confirmed.
| 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' | |
| }] | |
| } | |
| } |
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)