| /node_modules/ | |
| bundle.js |
This example demonstrates how the ol package can be used with webpack 2.
Clone the project.
git clone [email protected]: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> | |
| <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" type="text/css"> | |
| <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 {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}.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 --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' | |
| }, | |
| }; |
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:
This example doesn't seem to work anymore. I tried to get as close to possible as the suggested v7.2.2 quick start, but the webpack compiler doesn't like the '@'
$ npm run build
[email protected] build
webpack --config webpack.config.js --mode production
assets by status 220 KiB [cached] 1 asset
orphan modules 1.63 MiB [orphan] 255 modules
runtime modules 663 bytes 3 modules
cacheable modules 965 KiB
modules by path ./node_modules/ 17.8 KiB
./node_modules/rbush/index.js 16.1 KiB [built] [code generated]
./node_modules/quickselect/quickselect.js 1.72 KiB [built] [code generated]
./main.js + 168 modules 947 KiB [built] [code generated]
./style.css 160 bytes [built] [code generated] [1 error]
ERROR in ./style.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
@import "node_modules/ol/ol.css";
|
| html, body {
@ ./main.js 1:0-21
webpack 5.75.0 compiled with 1 error in 2374 ms
works for me on node 16.11 and npm 8
(base) micha@thinkpad:~/dev$ cd ol-webpack/
(base) micha@thinkpad:~/dev/ol-webpack$ ls
index.html package.json readme.md
main.js package-lock.json webpack.config.js
(base) micha@thinkpad:~/dev/ol-webpack$ npm i
added 133 packages, and audited 134 packages in 4s
18 packages are looking for funding
run `npm fund` for details
2 vulnerabilities (1 high, 1 critical)
To address all issues, run:
npm audit fix
Run `npm audit` for details.
npm notice
npm notice New major version of npm available! 8.0.0 -> 9.3.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.3.1
npm notice Run npm install -g [email protected] to update!
npm notice
(base) micha@thinkpad:~/dev/ol-webpack$ npm run build
> [email protected] build
> wp --config webpack.config.js
⬡ webpack: Build Finished
⬡ webpack: asset bundle.js 182 KiB [emitted] [minimized] (name: main)
orphan modules 1.7 MiB [orphan] 211 modules
./main.js + 137 modules 899 KiB [built] [code generated]
webpack 5.58.1 compiled successfully in 5252 ms
(base) micha@thinkpad:~/dev/ol-webpack$ ls
bundle.js main.js package.json readme.md
index.html node_modules package-lock.json webpack.config.js
(base) micha@thinkpad:~/dev/ol-webpack$ node -v
v16.11.0
(base) micha@thinkpad:~/dev/ol-webpack$ npm -v
8.0.0
It may be because I don't have admin rights for node/npm and have them set up locally.
For context:
$ npm -v
8.19.3
$ node -v
v18.13.0
For a more updated setup, see https://github.com/openlayers/ol-webpack.
You can also get a project set up using the template above with this:
npx create-ol-app my-app --template webpack
See https://github.com/openlayers/create-ol-app for more detail.
@tschaub Oh, thanks! I tried that version too and got:
$ npm run build
[email protected] build
wp --config webpack.config.js
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
It may be something with my versions of Node and npm...
https://stackoverflow.com/questions/73144960/error-error0308010cdigital-envelope-routinesunsupported-at-new-hash-nodei
Not a big deal as I'm just trying to see how easy it is to build an OpenLayers project with WebPack.
@eflowbeach - Give it a try again now. It looks like webpack-nano no longer works (openlayers/ol-webpack#61 uses webpack-cli instead). The setup in that repo is very bare bones. You can use a dev server, configure loaders, etc. just as you would with another webpack project.
If you aren't already attached to webpack, I'd suggest vite as an alternative (see https://github.com/openlayers/ol-vite).
@tschaub thanks! I tried again with no luck. It's probably because of my lack of administrative priviledges with my particular machine with regards to npm libraries. I tried Vite and it worked great! Thanks for the suggestion!
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