Create a gist now

Instantly share code, notes, and snippets.

@tschaub /.gitignore
Last active Jan 16, 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>
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 'ol/ol.css';
import Map from 'ol/map';
import View from 'ol/view';
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"
"devDependencies": {
"css-loader": "^0.28.4",
"style-loader": "^0.18.2",
"webpack": "^3.3.0"
"dependencies": {
"ol": "^4.2.0"
const webpack = require('webpack');
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
module: {
rules: [
test: /\.css$/,
use: [
{loader: 'style-loader'},
{loader: 'css-loader'}
plugins: [
new webpack.optimize.UglifyJsPlugin()

Excelente, lo probaré. Gracias.

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

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

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