Using OpenLayers with Webpack

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_111":-5,"_50":16,"_112":-5,"_113":114,"_115":116},"routes/viz-public",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":16,"_18":16,"_19":-5,"_20":21,"_22":16,"_23":24,"_25":-5,"_26":-5,"_27":-5,"_28":16,"_29":30,"_31":-5,"_32":33},"vizInfo",{"_40":60,"_89":90,"_91":92,"_93":-7,"_94":43,"_95":41,"_96":-5,"_97":98,"_99":16,"_100":101,"_102":101,"_103":-7,"_104":-7,"_57":105,"_59":106,"_107":-5,"_108":56,"_109":110},"vizContent",{"_40":60,"_61":62},"ownerAccount",{"_40":41,"_42":43,"_44":45,"_46":39,"_47":-5,"_48":-7,"_49":-7,"_50":16,"_51":-7,"_52":39,"_53":54,"_55":56,"_57":58,"_59":58},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",0,"forkedFromViz","runtimeVersion","license","descriptionIsAiGenerated","sourceProvenance",{"_34":35,"_36":37,"_27":-5,"_38":39},"project","socialImageUrl","https://next.vizhub.com/assets/unfurl.webp","sourceType","gist","originalUrl","https://gist.github.com/ThomasG77/064382a2462f65cfc78fe18d4254290e","author","ThomasG77","id","gist-user-thomasg77","accountType","user","email","","displayName","avatar","oauthProvider","oauthId","isAdmin","stripeCustomerId","handle","handleNormalized","thomasg77","lifecycleEmailsEnabled",true,"createdAt",1791690388506,"updatedAt","gist-064382a2462f65cfc78fe18d4254290e","files",{"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":74},"f1",{"_75":87,"_77":88},"f2",{"_75":85,"_77":86},"f3",{"_75":83,"_77":84},"f4",{"_75":81,"_77":82},"f5",{"_75":79,"_77":80},"f6",{"_75":76,"_77":78},"name","webpack.config.js","text","const webpack = require('webpack');\n\nmodule.exports = {\n entry: './main.js',\n output: {\n filename: 'bundle.js'\n },\n module: {\n rules: [\n {\n test: /\\.css$/,\n use: [\n {loader: 'style-loader'},\n {loader: 'css-loader'}\n ]\n },\n {\n test: /\\.js$/,\n exclude: /(node_modules.(?!ol\\/))/,\n use: {\n loader: 'babel-loader',\n options: {\n babelrc: false,\n presets: ['env'],\n sourceMaps: true\n }\n }\n }\n ]\n },\n plugins: [\n new webpack.optimize.UglifyJsPlugin()\n ]\n};\n","package.json","{\n \"name\": \"ol-webpack\",\n \"version\": \"1.0.0\",\n \"description\": \"Example using OpenLayers with Webpack\",\n \"scripts\": {\n \"build\": \"webpack --config webpack.config.js\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.25.0\",\n \"babel-loader\": \"^7.1.1\",\n \"babel-preset-env\": \"^1.6.0\",\n \"css-loader\": \"^0.28.4\",\n \"style-loader\": \"^0.18.2\",\n \"webpack\": \"^3.3.0\",\n \"webpack-dev-server\": \"^2.4.5\"\n },\n \"dependencies\": {\n \"ol\": \"5.0.0-beta.7\"\n }\n}\n","main.js","import 'ol/ol.css';\nimport Map from 'ol/Map';\nimport View from 'ol/View';\nimport TileLayer from 'ol/layer/Tile';\nimport XYZ from 'ol/source/XYZ';\n\nnew Map({\n target: 'map',\n layers: [\n new TileLayer({\n source: new XYZ({\n url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'\n })\n })\n ],\n view: new View({\n center: [0, 0],\n zoom: 2\n })\n});\n","index.html","\n\n \n \n Using OpenLayers with Webpack\n \n \n \n

\n \n \n\n","_readme_.md","# OpenLayers + Webpack\n\nThis example demonstrates how the `ol` package can be used with webpack 2.\n\nClone the project.\n\n git clone git@gist.github.com:79025aef325cd2837364400a105405b8.git ol-webpack\n\nInstall the project dependencies.\n\n cd ol-webpack\n npm install\n\nCreate a bundle for the browser.\n\n npm run build\n\nOpen `index.html` to see the result.\n\n open index.html\n",".gitignore","/node_modules/\nbundle.js\n","slug","064382a2462f65cfc78fe18d4254290e","title","Using OpenLayers with Webpack","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","-Uo3shZqSUzOGMKsZ28A-","startCommitId","forkedFrom","forkedFromVisibility",1519780669000,1519781900000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]