webpack 参考: https://www.webpackjs.com/ 和 https://webpack.github.io/
参考这个博客:https://www.jianshu.com/p/948db433f16e
windows 10 提前安装好node环境,node自带npm包管理器。
1.建立项目文件夹,在此文件夹里面进行项目初始化
cd 项目文件夹
npm init -y
# 不添加参数 -y 的话,可以个性化填写各类项目信息
初始化后,自动生成package.json文件
2.安装 webpaack
npm install --save-dev webpack
npm install --save-dev webpack-cli
npm i -D webpack-dev-server
# 也全局安装这两个命令
npm install -g webpack
npm install -g webpack-cli
自动生成 node_modules 文件夹,以及相关webpack库
3.手动新建 dist 和src 目录
4.手动新建 webpack.config.js 文件
const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin'); // 引入html-webpack-plugin插件
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './src/scripts/index.js',
output: {
filename: 'scripts/index.js',
path: path.resolve(__dirname, './dist')
},
//启动服务
//webpack-dev-server
//当前目录作为根目录,启动一个服务,会自动的打包,实时刷新
devServer:{
host:"localhost",
port:"8080",
contentBase:__dirname+"/dist"
},
module: {
rules: [ // 其中包含各种loader的使用规则
{
test: /\.css$/, // 正则表达式,表示打包.css后缀的文件
use: ['style-loader','css-loader'] // 针对css文件使用的loader,注意有先后顺序,数组项越靠后越先执行
},
{ // 图片打包
test: /\.(png|jpg|gif|svg)$/,
loader: 'url-loader',
options: {
name: './images/[name].[ext]',
limit: 8192
}
}
]
},
plugins: [ // 打包需要的各种插件
new htmlWebpackPlugin({ // 打包HTML
template: './src/index.html', // HTML模板路径
//filename:'index.html',//输出目标html文件,相对于output的path
//chunks:['index'],//对应加载的资源,即html文件需要引入的js模块
inject:true//资源加入到底部,把模块引入到html文件的底部
})
],
watch: false // 监听修改自动打包
};
5.dist目录下新建index.html
# 打包后自动生成
6.src目录下新建index.js
import mapboxgl from 'mapbox-gl';
import RulerControl from 'mapbox-gl-controls/lib/ruler';
import StylesControl from 'mapbox-gl-controls/lib/styles';
import CompassControl from 'mapbox-gl-controls/lib/compass';
import ZoomControl from 'mapbox-gl-controls/lib/zoom';
import LanguageControl from 'mapbox-gl-controls/lib/language';
import InspectControl from 'mapbox-gl-controls/lib/inspect';
import TooltipControl from 'mapbox-gl-controls/lib/tooltip';
import MapboxLanguage from '@mapbox/mapbox-gl-language';
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
import { MapboxStyleSwitcherControl } from "mapbox-gl-style-switcher";
import "mapbox-gl-style-switcher/styles.css";
import 'mapbox-gl-controls/theme.css';
import '@mapbox/mapbox-gl-geocoder/lib/mapbox-gl-geocoder.css';
import 'mapbox-gl/src/css/mapbox-gl.css';
mapboxgl.accessToken = 'pk.eyJ1IjoiYWdhbmxpYW5nIiwiYSI6ImNrNGJ6anI3ZzBpcnEzcXA4bmJnZW1hZjMifQ.6XLBnoo3qZjPvmymeo9QMw';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [113.254, 23.5478], // starting position [lng, lat]
zoom: 10, // starting zoom
hash:true,
});
// 添加相关的地图控件
// Add zoom and rotation controls to the map.
// map.addControl(new mapboxgl.NavigationControl());
const scale = new mapboxgl.ScaleControl({
maxWidth: 80,
unit: 'imperial'
});
map.addControl(scale);
scale.setUnit('metric');
map.addControl(new MapboxStyleSwitcherControl());
// mapbox-gl-controls 插件
map.addControl(new CompassControl(), 'top-right');
map.addControl(new ZoomControl(), 'top-right');
map.addControl(new mapboxgl.FullscreenControl());
//
map.addControl(new MapboxLanguage({
defaultLanguage: 'zh'
}));
// map.addControl(new InspectControl(), 'bottom-right');
// map.addControl(new TooltipControl({ layer: '$fill' }));
// rulercontrols
map.addControl(new RulerControl(), 'top-right');
map.on('ruler.on', () => console.log('ruler: on'));
map.on('ruler.off', () => console.log('ruler: off'));
/* given a query in the form "lng, lat" or "lat, lng" returns the matching
* geographic coordinate(s) as search results in carmen geojson format,
* https://github.com/mapbox/carmen/blob/master/carmen-geojson.md
*/
const coordinatesGeocoder = function(query) {
// match anything which looks like a decimal degrees coordinate pair
var matches = query.match(
/^[ ]*(?:Lat: )?(-?\d+\.?\d*)[, ]+(?:Lng: )?(-?\d+\.?\d*)[ ]*$/i
);
if (!matches) {
return null;
}
function coordinateFeature(lng, lat) {
return {
center: [lng, lat],
geometry: {
type: 'Point',
coordinates: [lng, lat]
},
place_name: 'Lat: ' + lat + ' Lng: ' + lng,
place_type: ['coordinate'],
properties: {},
type: 'Feature'
};
}
var coord1 = Number(matches[1]);
var coord2 = Number(matches[2]);
var geocodes = [];
if (coord1 < -90 || coord1 > 90) {
// must be lng, lat
geocodes.push(coordinateFeature(coord1, coord2));
}
if (coord2 < -90 || coord2 > 90) {
// must be lat, lng
geocodes.push(coordinateFeature(coord2, coord1));
}
if (geocodes.length === 0) {
// else could be either lng, lat or lat, lng
geocodes.push(coordinateFeature(coord1, coord2));
geocodes.push(coordinateFeature(coord2, coord1));
}
return geocodes;
};
// geocoder
const geocoder = new MapboxGeocoder(
{
accessToken: mapboxgl.accessToken ,
localGeocoder: coordinatesGeocoder,
placeholder:'请输入关键字',
mapboxgl:mapboxgl
}
);
//geocoder.addTo('#geocoder-container');
map.addControl(geocoder,'top-left');
// 添加maker
const marker = new mapboxgl.Marker()
.setLngLat([113.369, 23.456])
.addTo(map);
7.安装mapbox-gl
npm install --save mapbox-gl
8.package.json 中添加自动构建脚本
{
"name": "demo001",
"version": "1.0.0",
"description": "20200623",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack-cli",
"start": "webpack",
"dev": "webpack && webpack-dev-server --open"
},
"keywords": [],
"author": "aganliang",
"license": "ISC",
"devDependencies": {
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"@mapbox/mapbox-gl-draw": "^1.1.2",
"@mapbox/mapbox-gl-geocoder": "^4.5.1",
"@mapbox/mapbox-gl-language": "^0.10.1",
"css-loader": "^3.6.0",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^4.3.0",
"mapbox-gl": "^1.11.0",
"mapbox-gl-controls": "^1.6.4",
"mapbox-gl-style-switcher": "^1.0.6",
"style-loader": "^1.2.1"
}
}
9.打包
# 在项目目录下
npm run dev
按照package.json的脚本,上面的命令启动webpack的构建脚本
按照webpack.config.js的构建脚本,项目会在dist目录中生成js和html