需求
小项目。纯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的回答)：
动态加载：esri-loader 使用动态脚本加载技术来加载 ArcGIS API for
JavaScript。它会根据用户的需求，在运行时动态地向 HTML 页面中插入<script>标签，从指定的 CDN或本地目录加载相关的 JavaScript 文件。异步加载：ArcGIS API for JavaScript 包含多个 JavaScript文件，有些文件可能比较大。为了提高页面加载速度，esri-loader 使用异步加载方式，按需加载所需的文件。这样可以避免一次性加载整个 API，而只加载需要的部分。
回调处理：当相关 JavaScript 文件加载完成后，esri-loader 会触发用户指定的回调函数。在回调函数中，您可以安全地使用ArcGIS API for JavaScript 的模块和类。
模块导入：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)
// 必须这样判断，如果html引入了，那这里不用引入，但是似乎会有问题
// 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，去除了重新打包就没有报错，这一快比较模糊。）
知识储备
解决这个问题需要的知识储备为
- JavaScript模块系统；
- webpack原理；
- webpack、arcgis js api使用经验；
总结
从原则、框架逻辑开始，也就是各家官方网站库使用教程开始，一般都有前言，包括背景介绍、库开发注意事项、如何使用（继承方式）
ArcGIS Maps SDK for JavaScript
webpack-getting-started
体系化知识的必要性。碎片化学习只在体系化学习之后。
你要学一个新东西，就要问这个东西是什么？历史是什么？怎么用？目前能用在哪里？基础内容都有什么？
没有具体老师的时候，官方就是最好的老师。
后记
webpack可以修改模块系统标识，所以有人一开始就使用AMD模块开发，修改难度比较难的话就用
libraryTarget: ‘amd’
但是我没时间测试，所以有人可以可以丢链接给我。
