Create a gist now

Instantly share code, notes, and snippets.

@tschaub /.gitignore
Last active Apr 24, 2018

What would you like to do?
OpenLayers + Webpack
/node_modules/
bundle.js

OpenLayers + Webpack

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

Clone the project.

git clone git@gist.github.com:79025aef325cd2837364400a105405b8.git 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>
<html>
<head>
<meta charset="utf-8">
<title>Using OpenLayers with Webpack</title>
<style>
html, body {
margin: 0;
height: 100%;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="./bundle.js"></script>
</body>
</html>
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}.tile.openstreetmap.org/{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()
]
};
@juusechec

This comment has been minimized.

Show comment Hide comment
@juusechec

juusechec Mar 10, 2017

Excelente, lo probaré. Gracias.

Excelente, lo probaré. Gracias.

@hutzelknecht

This comment has been minimized.

Show comment Hide comment
@hutzelknecht

hutzelknecht Mar 22, 2017

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

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

@darkscript

This comment has been minimized.

Show comment Hide comment
@darkscript

darkscript 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

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