webpack 使用樣例（以mapbox-gl爲例）

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