| node_modules/ | |
| bundle.js | |
| style.css |
This example demonstrates how the ol package can be used with webpack and the Closure Compiler.
Clone the project.
git clone git@gist.github.com:8ceafc6293455ba491dd9be12c15761f.git ol-webpack-closure
Install the project dependencies.
cd ol-webpack-closure
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 and the Closure Compiler</title> | |
| <link href="style.css" rel="stylesheet"></head> | |
| <style> | |
| html, body, #map { | |
| margin: 0; | |
| height: 100%; | |
| 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-closure", | |
| "version": "1.0.0", | |
| "description": "Example using OpenLayers with Webpack and Closure Compiler", | |
| "scripts": { | |
| "build": "webpack --config webpack.config.js" | |
| }, | |
| "devDependencies": { | |
| "closure-webpack-plugin": "^0.0.13", | |
| "css-loader": "^0.28.7", | |
| "extract-text-webpack-plugin": "^3.0.2", | |
| "style-loader": "^0.18.2", | |
| "webpack": "^3.9.0" | |
| }, | |
| "dependencies": { | |
| "ol": "^5.0.0" | |
| } | |
| } |
| const ClosureCompilerPlugin = require('closure-webpack-plugin'); | |
| const ExtractTextPlugin = require('extract-text-webpack-plugin'); | |
| const webpack = require('webpack'); | |
| module.exports = { | |
| entry: './main.js', | |
| output: { | |
| filename: 'bundle.js' | |
| }, | |
| module: { | |
| rules: [ | |
| { | |
| test: /\.css$/, | |
| use: ExtractTextPlugin.extract({ | |
| fallback: 'style-loader', | |
| use: 'css-loader' | |
| }) | |
| } | |
| ] | |
| }, | |
| plugins: [ | |
| new ExtractTextPlugin('style.css'), | |
| new ClosureCompilerPlugin({mode: 'AGGRESSIVE_BUNDLE'}, { | |
| compilation_level: 'ADVANCED', | |
| warning_level: 'QUIET', | |
| jscomp_off: ['checkVars'] | |
| }) | |
| ] | |
| }; |