Skip to content

Instantly share code, notes, and snippets.

@tschaub tschaub/.gitignore
Last active Aug 13, 2018

What would you like to do?
OpenLayers + Webpack

OpenLayers + Webpack

This example demonstrates how the ol package can be used with webpack 2.

Clone the project.

git clone ol-webpack

Install the project dependencies.

cd ol-webpack
npm install

Create a bundle for the browser.

npm run build

Open index.html to see the result.

open index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Using OpenLayers with Webpack</title>
<link rel="stylesheet" href="" type="text/css">
html, body {
margin: 0;
height: 100%;
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
<div id="map"></div>
<script src="./bundle.js"></script>
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
new Map({
target: 'map',
layers: [
new TileLayer({
source: new XYZ({
url: 'https://{a-c}{z}/{x}/{y}.png'
view: new View({
center: [0, 0],
zoom: 2
"name": "ol-webpack",
"version": "1.0.0",
"description": "Example using OpenLayers with Webpack",
"scripts": {
"build": "webpack --config webpack.config.js --mode production"
"devDependencies": {
"webpack": "^4.12.1",
"webpack-command": "^0.3.0"
"dependencies": {
"ol": "^5.0.0"
const webpack = require('webpack');
module.exports = {
entry: './main.js',
output: {
path: __dirname,
filename: 'bundle.js'

This comment has been minimized.

Copy link

juusechec commented Mar 10, 2017

Excelente, lo probaré. Gracias.


This comment has been minimized.

Copy link

hutzelknecht commented Mar 22, 2017

Nice - thanks for this - was waiting for this change. will try as soon as i return from the FossGIS 2017


This comment has been minimized.

Copy link

darkscript commented Jan 16, 2018

Great guide, thanks, am trying to use webpack with ol and ol-ext, got import export problem, @tschaub, would you please check this simple repo and maybe you will see what's the issue. Thanks


This comment has been minimized.

Copy link

sbowler commented Aug 10, 2018

Not sure if this is the best place to put this, but I was noticing OL is a very large part of my webpack build even though I'm using very little of OL currently with a blank canvas map. Is there some way to optimize this? I thought part of the point of going to modules like this was so that it doesn't need to pull in a bunch of stuff you're not using.

This is basically the extent of my code

import 'ol/ol.css';
import { Map, View } from 'ol';
import * as Control from 'ol/control';

this.$olMap = new Map({
    target: this.$el,
    controls: Control.defaults({
    rotate: true,
    zoom: true
  layers: layers.getLayers(),
  view: this.view

webpack analysis:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.