Webpack打包arcgis js api 3.x纯html+JS+CSS项目

已于 2023-07-01 15:49:49 修改
阅读量1.2k 收藏 1
点赞数
分类专栏： WebGIS 前端开发 webpack 文章标签： webpack arcgis javascript
于 2023-07-01 11:41:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34173038/article/details/131465320
版权
前端开发 同时被 3 个专栏收录
11 篇文章 0 订阅
订阅专栏
webpack
4 篇文章 0 订阅
订阅专栏
WebGIS
3 篇文章 0 订阅
订阅专栏

需求

小项目。纯HTML+JS+CSS已经部署上线，但是没有做混淆加密，需要进行混淆加密

分析

目前代码里面需要混淆加密的有main.js，其他的不用混淆加密。所以只需要对main.js进行混淆加密就可，但是要保证混淆加密之后能够访问方法。由于目前在index.html的script使用import导入main.js里面的方法，需要有名字，但是打包之后一般会报错找不到这个名字的模块，因为不是从html里面的script进行打包的，所以在script里面引入打包后的main.js（bundle.js）是不会引入成功的因为模块方法变了。因为做了变量名混淆。所以把html script方法放到main.js里面。

实践

入口文件在libs/mian.js 最终webpack打包代码，其中有两个关键点：
1. path: path.resolve(__dirname, ‘a-dist’),// 自定义明明，因为要推到服务器，所以不使用dist命名；
2. TerserPlugin中的混淆取消，只用去除console和代码注释，不能将混淆打开，否则会报错，和另一个混淆工具冲突；

// webpack.config.js
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
// 加密
const WebpackObfuscator = require('webpack-obfuscator');



module.exports = {
    entry: './libs/main.js',
    mode: 'production',
    output: {
        filename: 'bundle.js',
        // libraryTarget: 'amd', // 不用这样设置。因为改了引入esri js api模块的方式，不用AMD方式，改用esri-loader的自定义loadModules。原理是动态加载，避开由于使用require找不到对应模块的问题
        path: path.resolve(__dirname, 'a-dist'),// 自定义明明，因为要推到服务器，所以不使用dist
    },
    devtool: 'source-map',
    devServer: {
        // contentBase: path.join(__dirname, ''),
        compress: true,
        port: 8080,
        open: true, historyApiFallback: {
            index: 'index.html',
        },
    },
    optimization: {
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    // mangle: true, // 是否混淆变量名，默认为 true。因为引入了WebpackObfuscator，先注释
                   compress: {
                        // 压缩选项
                        drop_console: true, // 是否去除控制台输出，默认为 false
                        drop_debugger: true, // 是否去除调试语句，默认为 false
                    },
                    output: {
                        beautify: false, // 是否美化输出，默认为 false
                        comments: false, // 是否保留注释，默认为 true
                    },
                    // 更多选项请参考 Terser 文档
                },
            }),
        ],
    },
    plugins: [
        new ProgressBarPlugin(),
        new HtmlWebpackPlugin({
            template: 'index.html',  // 指定HTML模板文件的路径
            filename: 'index.html' // 生成的HTML文件名，默认为index.html
            // 还可以添加其他配置选项，如title、favicon等
        }),
        new CopyWebpackPlugin({
            patterns: [
                { from: 'img', to: 'img' },
                { from: 'static', to: 'static' },
                {
                    from: 'libs', to: 'libs', filter: (resourcePath) => {
                        // 在这里添加你想要忽略的文件或目录的逻辑判断。因为我的项目结构原因，打包时候不能把main.js也复制过去，排除掉。
                        return !resourcePath.endsWith('main.js') && !resourcePath.endsWith('map-action.js');
                    }/* globOptions: {
                        ignore: ['libs/main.js', 'libs/map-action.js'] // 设置要忽略的文件或目录的匹配模式
                    } */
                }, // 指定要拷贝的文件或目录，从来源路径到目标路径
                // 可以继续添加其他的规则
            ],
        }),
        // 目前没有和TerserPlugin方法混淆，因为terserOptions中的mangle没有设置以为true
        new WebpackObfuscator({
            rotateUnicodeArray: true,// 启用 Unicode 数组的字符旋转。默认值为 true
            compact: true,// 合并和混淆输出代码。默认值为 true。
            selfDefending: true,// 生成自保护的混淆代码。默认值为 true。
            stringArray: true,// 启用字符串数组混淆。默认值为 true。
            stringArrayEncoding: ['base64', 'rc4'],// 指定字符串数组的编码方式。可选值为 'base64'、'rc4' 和 'none'。默认值为 'base64'。
            
        }),
    ],
    // externals: {
    //     esri: 'esri', // 注意不用在这里在引入一次
    // },

    module: {
        rules: [
            // JS 文件的加载器
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            },
            // CSS 文件的加载器
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
};

打包结束
在这里插入图片描述

难点

Webpack打包原理中会解析模块引入语句，如import、require找到对应模块，但是esri在html+JS+CSS获取是通过require获取动态链接。问题来了，那为什么一开始arcgis js用require来请求？为什么不用import？但是一般情况下引入require是没有这个方法的，那require从哪里来的？参考：ArcGIS api for js中的require()究竟是什么。得出require()方法从init.js里面来。
为了配合webpack打包，不能使用require()进行加载esri模块，换种方式请求！查了一下集成和请求模块方式，发现有esri-loader，其中有个方法loadModules。如下代码
esri-loader原理

esri-loader具体原理如下(ChatGPT 3.5的回答)：

  1. 动态加载：esri-loader 使用动态脚本加载技术来加载 ArcGIS API for
    JavaScript。它会根据用户的需求，在运行时动态地向 HTML 页面中插入<script>标签，从指定的 CDN或本地目录加载相关的 JavaScript 文件。

  2. 异步加载：ArcGIS API for JavaScript 包含多个 JavaScript文件，有些文件可能比较大。为了提高页面加载速度，esri-loader 使用异步加载方式，按需加载所需的文件。这样可以避免一次性加载整个 API，而只加载需要的部分。

  3. 回调处理：当相关 JavaScript 文件加载完成后，esri-loader 会触发用户指定的回调函数。在回调函数中，您可以安全地使用ArcGIS API for JavaScript 的模块和类。

  4. 模块导入：esri-loader 通过自定义的 loadModules方法，简化了模块的导入过程。它允许您以数组形式传入需要导入的模块名，并返回 Promise 对象。当这些模块加载完成后，Promise才会被解析，您就可以在回调函数中使用这些模块

>./libs/main.js esri 地图初始化
import * as esriLoader from './esri-loader/esm/esri-loader.js';
export async function initMap(data) {
    // require和function中的参数必须对应
    console.log("🚀 ~ file: main.js:696 ~ initMap ~ window.$esriLocal:", window.$esriLocal)
   // if (!esriLoader.isLoaded()) {
      //  esriLoader.loadScript({ url: "https://js.arcgis.com/3.44/" })
     //   esriLoader.loadCss("https://js.arcgis.com/3.44/esri/css/esri.css")
    // 原来是require，改为loadModules，这样webpack打包时候就不会解析require，也不用在webpack.config.js external里面配置了。参考官方：
    esriLoader.loadModules([
        "esri/map",
        "esri/Color",
        "esri/graphic",
        "esri/geometry/Extent",
        "esri/geometry/Point",
        "esri/geometry/Polygon",
        "esri/geometry/Polyline",
        "esri/SpatialReference",
        "esri/layers/KMLLayer",
        "esri/layers/GraphicsLayer",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/FillSymbol",
        "esri/symbols/LineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/TextSymbol",
        "dojo/parser",
        "esri/layers/TileInfo",
        "esri/layers/WebTiledLayer",
        "dojo/dom-style",
        "esri/config"]).then(function ([
            Map, 
            Color, 
            Graphic, 
            Extent, 
            Point, 
            Polygon, 
            Polyline,
            SpatialReference,
            KMLLayer, 
            GraphicsLayer, 
            SimpleMarkerSymbol,
            FillSymbol,
            LineSymbol,
            SimpleFillSymbol,
            SimpleLineSymbol,
            TextSymbol,
            parser, TileInfo, WebTiledLayer, domStyle,
            esriConfig]) {
            window.$esriLocal = {
                Map: Map,
                Color: Color,
                SpatialReference: SpatialReference,
                Extent: Extent,
                WebTiledLayer: WebTiledLayer,
                TileInfo: TileInfo,
                Graphic: Graphic,
                Point: Point,
                Polyline: Polyline,
                GraphicsLayer: GraphicsLayer,
                SimpleMarkerSymbol: SimpleMarkerSymbol,
                FillSymbol: FillSymbol,
                LineSymbol: LineSymbol,
                SimpleFillSymbol: SimpleFillSymbol,
                SimpleLineSymbol: SimpleLineSymbol,
                TextSymbol: TextSymbol,
            }

            //  else {
            console.log("🚀 ~ file: main.js:342 ~ initMap ~ window.$esriLocal:", window.$esriLocal)
            /** 当前地图视角的显示矩形范围*/
            let extentp = { west: 125.9738504337227, south: 61.624205573999646, east: 116.55005559052246, north: 38.67104274606849 };
            let extent = new window.$esriLocal.Extent({
                xmax: extentp.east,
                xmin: extentp.west,
                ymax: extentp.north,
                ymin: extentp.south,
                spatialReference: { wkid: 4490 },
            });
            map = new window.$esriLocal.Map("map", {
                center: [],
                zoom: 1,
                fadeOnZoom: true,
                fitExtent: true,
                sliderPosition: "bottom-right",
                logo: false,// 去除官方logo
                // slider:false,
            });
            // 定位到范围
            map.setExtent(extent);
            // 在这里添加自定义底图
        });
    //}
    // 老方法，但是这样在webpack中会影响打包，因为webpack默认使用commonjs模块系统进行打包，找不到对应模块和包就会报错。
   /*  await require([
        "esri/map",
        "esri/Color",
        "esri/graphic",
        "esri/geometry/Extent",
        "esri/geometry/Point",
        "esri/geometry/Polygon",
        "esri/geometry/Polyline",
        "esri/SpatialReference",
        "esri/layers/KMLLayer",
        "esri/layers/GraphicsLayer",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/FillSymbol",
        "esri/symbols/LineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/TextSymbol",
        "dojo/parser",
        "esri/layers/TileInfo",
        "esri/layers/WebTiledLayer",
        "dojo/dom-style",
        "esri/config",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
    ], function (
        Map, Color, Graphic, Extent, Point, Polygon, Polyline,
        SpatialReference, KMLLayer, GraphicsLayer, SimpleMarkerSymbol,
        FillSymbol,
        LineSymbol,
        SimpleFillSymbol,
        SimpleLineSymbol,
        TextSymbol,
        parser, TileInfo, WebTiledLayer, domStyle,
        esriConfig
    ) {
        window.$esriLocal = {
            Map: Map,
            Color: Color,
            SpatialReference: SpatialReference,
            Extent: Extent,
            WebTiledLayer: WebTiledLayer,
            TileInfo: TileInfo,
            Graphic: Graphic,
            Point: Point,
            Polyline: Polyline,
            GraphicsLayer: GraphicsLayer,
            SimpleMarkerSymbol: SimpleMarkerSymbol,
            FillSymbol: FillSymbol,
            LineSymbol: LineSymbol,
            SimpleFillSymbol: SimpleFillSymbol,
            SimpleLineSymbol: SimpleLineSymbol,
            TextSymbol: TextSymbol,
        }

        //  else {
        console.log("🚀 ~ file: main.js:342 ~ initMap ~ window.$esriLocal:", window.$esriLocal)
        /** 当前地图视角的显示矩形范围*
        let extentp = { west: 125.9738504337227, south: 61.624205573999646, east: 116.55005559052246, north: 38.67104274606849 };
        let extent = new window.$esriLocal.Extent({
            xmax: extentp.east,
            xmin: extentp.west,
            ymax: extentp.north,
            ymin: extentp.south,
            spatialReference: { wkid: 4490 },
        });
        map = new window.$esriLocal.Map("map", {
            center: [],
            zoom: 1,
            fadeOnZoom: true,
            fitExtent: true,
            sliderPosition: "bottom-right",
            logo: false,// 去除官方logo
            // slider:false,
        });
        // 定位到范围
        map.setExtent(extent);
        // }

    }) */

}

缺点

也算优点吧，就是每次修改代码生效就需要用webpack的devServer进行了，不能用直接访问文件的形式。

注意

可能会出现multipleDefine的错误。就是引入init.js多次，引入一次就够了，还有网上说是jquery，但是我代码里面没用用jQuery，之前也出现了multipleDefine，但是设置这个之后就没有出现了，后面我又用html引入init.js，发现又没有报错，下次报错了再补充（主要没有发现哪里导致重复多次定义，init.js也就引用一次。

另一个猜想，是因为webpac之前有一篇文章说打包成amd，就是这个参数libraryTarget，然后在手机上出现multipleDefine，去除了重新打包就没有报错，这一快比较模糊。）

知识储备

解决这个问题需要的知识储备为

  1. JavaScript模块系统；
  2. webpack原理；
  3. webpack、arcgis js api使用经验；

总结

从原则、框架逻辑开始，也就是各家官方网站库使用教程开始，一般都有前言，包括背景介绍、库开发注意事项、如何使用（继承方式）
ArcGIS Maps SDK for JavaScript
在这里插入图片描述
webpack-getting-started在这里插入图片描述

体系化知识的必要性。碎片化学习只在体系化学习之后。
你要学一个新东西，就要问这个东西是什么？历史是什么？怎么用？目前能用在哪里？基础内容都有什么？
没有具体老师的时候，官方就是最好的老师。

后记

webpack可以修改模块系统标识，所以有人一开始就使用AMD模块开发，修改难度比较难的话就用

libraryTarget: ‘amd’

但是我没时间测试，所以有人可以可以丢链接给我。

RayFet
关注
专栏目录
【测评】 使用@arcgis/cli脚手架和esri-loader方式进行ArcGIS JS API开发的测评
X北辰北的博客
03-02 1849
概述 当我既写了esri-loader方式来进行ArcGIS JS API的开发文章，又写了@arcgis/cli脚手架的方式来进行ArcGIS JS API的开发文章之后，相信很多小伙伴看到后会产生“选择纠结症”，我到底该用哪种方式来进行ArcGIS JS API的开发呢？不要着急，我给你一个可供选择的参考，简单又实用： 如果项目已经在进行实施，中途可能需要用到ArcGIS JS API中的...
如何使用webpack进行打包？（包括HTML、CSS、devserver、Vue、图片等）
jia嘉ioo的博客
03-28 1694
webpack打包
Webpack Obfuscator 开源项目教程
最新发布
gitblog_00530的博客
08-21 314
Webpack Obfuscator 开源项目教程 webpack-obfuscator项目地址:https://gitcode.com/gh_mirrors/we/webpack-obfuscator 1. 项目的目录结构及介绍 Webpack Obfuscator 项目的目录结构如下： webpack-obfuscator/ ├── examples/ │ ├── basic/ │ ...
webpack玩转arcgis
Doniet的专栏
08-21 456
webpack玩转arcgis 前言 最近公司开发一个项目,用到arcgis.之前接触过openlayers和cesium,觉着arcgs应该也很简单.于是就到官网逛了一圈,结果傻眼了. 官网的教程基本都是直接引入js或者基于AMD引用(早些版本依赖dojo,dojo这玩意不支持ES模块的语法),而基于ES模块的就只是简单的介绍,完全不具备用于项目的实例.研究了很久,才做了这个简单demo. 项目要求 arcgis版本4.17及以上 webpack版本4.0以上 package.json {
webpack入门之打包html,css,js,img(二)
weixin_33726318的博客
12-20 399
今天来说说如何打包css！！！！ 上一节我还漏了些好东西没贴出来，上一节我们是成功打包出html，js，最后也说了，每次发布版本，跟新代码进服务器的时候我们是跟新dist文件夹里面的东西 我们每次打包生成的js都是index.js,这就会出现一个问题，我们把代码跟新上服务器了，但是用户打开后发现新增的功能并没有体现出来，这其实是浏览器缓存在作怪， 因为我们每次生成的都是index.js，脚本...
当ArcGIS API for JavaScript遇见Webpack（一）
WDhongquan的专栏
11-14 1868
当ArcGIS API for JavaScript遇见Webpack（一）   小林666 关注 2017.08.14 21:27* 字数 1906 阅读 213评论 0喜欢 1赞赏 2 作者：liuyl 邮箱：liuyl.gisuni@gmail.com 关于作者：GIS从业者，主要在ArcGIS平台下做WebGIS开发 写在最前面 前些天
webpack(大概讲解)
Liucaicaia的博客
11-22 267
webpack的基本使用
探索ArcGIS API for JavaScript v3.23新特性与开发包下载
ArcGIS API for JavaScript v3.23还支持使用构建工具如Webpack和Babel，以便在现代JavaScript开发环境中使用，同时支持模块化开发和各种现代JavaScript语法特性。这些工具可以帮助开发者管理项目依赖、打包资源、...
cmv-calcite-maps-master.zip
11-13
Calcite Maps 是另一个基于 ArcGIS JavaScript API 的样式框架，它提供了一套简洁、现代的CSS样式和图标，旨在提升地图的视觉效果和用户体验。Calcite Maps 与 CMV 结合使用，可以进一步提升地图应用的外观和功能，...
GEOVISOR_ANDRES_RODRIGUEZ_IV
04-19
6. **Webpack或Rollup**：这些是模块打包工具，可能用来管理和优化项目中的JavaScript、CSS和其他资源。 7. **Git**：作为版本控制系统，用于版本管理及协同开发，"main"分支是Git仓库的默认主分支。 8. **JSDoc**...
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
10-17
本文通过两种方法给大家介绍了webpack打包时排除其中一个css、js文件，或单独打包一个css、js文件的方法 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
将js css html打包,webpack打包html.css.js代码(入门)
weixin_28730927的博客
07-03 892
webpackwebpack是什么 – 静态模块的打包工具,能进行模块化开发,自动处理打包后,模板中间的关系(依赖关系)什么是静态资源 – js css html如果使用webpack安装前检查需要使用系统中之前安装过得 node 中 npmnpm win7 12+ win10 12+ 14+ 也不能低于12node - v npm -v准备安装创建一个目录 web初始化 — npm init -...
webpack使用：通过html打包引入css和js文件
m0_37922443的博客
05-22 5870
之前写了一个简单工程的打包： 打包一个简单的工程 现在在这个基础上调整一下文件的结构，加入css后一起打包。 之前的文件结构： 现在把index.html放入src中，并把js文件放入js文件夹，css文件放入css文件夹，然后打包整个src文件。 common.css * { margin: 0; padding: 0; border: none; } body { background: lightblue; } index.css @import './comm
webpack打包html.css.js代码(入门)
月夜狼群的博客
06-22 288
webpack webpack是什么 – 静态模块的打包工具,能进行模块化开发,自动处理打包后,模板中间的关系(依赖关系) 什么是静态资源 – js css html 如果使用webpack 安装前检查 需要使用系统中之前安装过得 node 中 npm npm win7 12+ win10 12+ 14+ 也不能低于12 node - v npm -v 准备安装 创建一个目录 web 初始化 — npm init --yes 在安装的时候,防止安装过慢,可以使用中文镜像 np
记录一次webpack打包本地HTML-CSS-JS
ababbaqq的博客
08-29 203
1.新建文件夹 然后npm init - y 2.新建src文件,该文件夹下存放你要打包的文件 3.在项目根目录下安装webpack (npm i -D webpack webpack-cli) 4.项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件 5.
webpack基础一个最基础的打包 html + js + css
weixin_30469385的博客
06-18 5462
看了一大堆webpack的例子，最终发现都是神仙打架了。 我觉得首先只要能够搭起来一个最基本的项目入了门，以后就可以自己慢慢的往里钻研了。 所以今天搭了一个webpack的项目 ok，GO 1、初始化一个npm项目 npm i -y 2、安装webpack，4.0以上装webpack-cli npm i webpack webpack-cli -D 3、改pac...
如何把 html、js、css 等一个 html 网页打包成单一的 exe 可执行程序文件？
04-07 1252
要将 HTML、JS、CSS 等文件打包成一个单一的可执行程序文件，可以使用 Electron 等工具。
webpack压缩html,webpack打包压缩js与css步骤详解
weixin_39610774的博客
06-03 351
这次给大家带来webpack打包压缩js与css步骤详解，webpack打包压缩js与css的注意事项有哪些，下面就是实战案例，一起来看一下。打包压缩js与css由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压缩混淆，无需引用额外的插件,其命令 webpack -p 即表示调用UglifyJS来压缩代码，还有...
利用Webpack进行js模块化、CSS以及HTML的打包
weixin_51225684的博客
09-08 1406
file-loader可以自动识别css代码中的图片路径，并将其打包到指定目录，如果在js文件中，需要我们将图片资源引入进来，让后将其图片路径添加到图片对象中。前面我们陆续介绍了利用webpack将js、css和图片打包到dist目录下，但是目前我们还是通过在dist目录下创建html页面，然后引入打包后的资源。在代码最终上线时使用，只需要使用到最基本的打包功能，最终打包后的代码会进入到dist目录中，然后上传服务器即可。打包后，运行浏览index.html，页面中文字的大小和背景颜色已经生效。
Node.js + Webpack + Vue打造的个人博客项目教程
本项目是一个基于Node.js, Webpack以及Vue.js技术栈的个人博客系统。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，允许开发者使用JavaScript进行后端开发。Webpack是一个模块打包工具，它将各种资源视为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

RayFet

你的鼓励是我进步的第二大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值