9e330a37261997001c371790f916e631
leaflet-webpack 入门开发系列一初探篇(附源码下载)

前言

leaflet-webpack 入门开发系列环境知识点了解:

我之前有计划写一系列关于 leaflet 入门开发文章,只是一直没什么时间来整理,最近刚好单位有个 WebGIS 项目是用 leaflet 结合 webpack 来管理使用的,所以,开始了本篇文章 leaflet-webpack 入门开发系列一初探篇,对于 webpack 这个管理工具平台,我也是学习阶段,跟大家一起学习交流,写的不好之处,望见谅。

环境搭建

  • 安装 node.js,笔者版本为:10.15.3
  • 下载安装 vscode
  • demo 项目工程文件目录以及关键代码讲解

dist webpack 打包编译后的文件夹
dist/index.html 地图主页
src/index.js 地图初始化代码
package.json 记录了项目的配置信息,包括名称、版本、许可证等元数据,也会记录所需的各种模块,包括 执行依赖,和开发依赖
webpack.config.js webpack 的配置文件

  • index.html
<html>
  <head>
    <title>Leaflet入门开发系列Demo</title>
  </head>
  <body>
    <div id="map" style="width: 100%; height: 100%;"></div>
    <script src="bundle.js"></script>
  </body>
</html>
  • index.js
top Created with Sketch.