OpenLayers + Webpack by ThomasG77

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>

_readme_.md

# 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

main.js

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
  })
});

package.json

{
  "name": "ol-webpack",
  "version": "1.0.0",
  "description": "Example using OpenLayers with Webpack",
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.6.0",
    "css-loader": "^0.28.4",
    "style-loader": "^0.18.2",
    "webpack": "^3.3.0",
    "webpack-dev-server": "^2.4.5"
  },
  "dependencies": {
    "ol": "5.0.0-beta.7"
  }
}

webpack.config.js

const webpack = require('webpack');

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {loader: 'style-loader'},
          {loader: 'css-loader'}
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules.(?!ol\/))/,
        use: {
          loader: 'babel-loader',
          options: {
            babelrc: false,
            presets: ['env'],
            sourceMaps: true
          }
        }
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin()
  ]
};