webpack打包后js代码失效，函数功能出现not defined，请问应该怎么解决？-灵析社区

webpack打包后js代码失效，函数功能出现not defined。 lib()等代码是使用echarts插件绘制的，在a6和a4模板中还使用了echarts-gl,a4模板中还使用了html-docx.js，dom-to-image.min.js，实现了截图并导出为word 在html中的引用方式为： 用户画像 --> window.onload = function() { // 提供一个包含 liaData 和 libData 的对象给 ck() 函数 ck({ liaData: 'someData', libData: 'someOtherData' }); // 在 ck 函数执行后调用 zhexianRequest zhexianRequest(); };   用户画像分析   体验活动分析   体验项目分析   文创转化分析   兴趣爱好分析   数据报表导出 选择时间 选择活动 中秋节活动 国庆节活动 元旦活动 春节活动 $(function(){ $("#select").change(function(){ var op=$("#select").find('option'); op.get(0).selected=true; }); }) --> lia() --> lib() 年龄段建议： 0~12岁 20%：节假日人数偏多,建议举办手工体验活动 12~24岁 20%：节假日人数偏多,建议举办非遗课堂传播知识 24~40岁 40%：节假日客流占比较大部分,建议吸引文创转化 40岁以上 20%：人群客流稳定,建议吸引文创转化 用户性别 女性 40% 男性 60% 用户性别建议： 根据参与活动用户的性别比例,调整文创转化物品的人群偏好 44444444 33333333 打包后会自动生成头文件，所以原先的头文件被我注释掉了 以下为js函数代码： window.ck = function(obj) { console.log("ck() function called"); // 获取 obj 对象中的属性 if (obj && obj.liaData && obj.libData) { console.log("ck() function called"); // 获取 obj 对象中的属性 var liaData = obj.liaData; var libData = obj.libData; // body宽高 let cw = 1900, ch = 960 let body = document.getElementById('body') body.style.width = `${cw}px` body.style.height = `${ch}px` // 对body进行缩放 function windowResize() { // 窗口宽高 let w = window.innerWidth, h = window.innerHeight //窗口最小宽高度 if (w ch ? h : ch - r * ch)) + 'px' body.style.marginRight = (-(w > cw ? w : cw - r * cw)) + 'px' } windowResize() // 监听窗口尺寸变化 window.addEventListener('resize', windowResize); } else { console.error("Invalid or missing parameters for ck() function."); } } // 环状图 window.lib = function() { var linb = echarts.init(document.getElementById('linb')); // 指定图表的配置项和数据 linboption = { textStyle:{ fontFamily:'szzt', }, tooltip: { trigger: 'item' }, title: { text:"用户年龄段", //标题位置 left:"10", top:"20", //标题样式 textStyle: { fontSize: 18, color:"#000000", } }, series: [ { name: '访问来源', type: 'pie', radius: ['45%', '70%'], //饼块起始角度 startAngle: 80, avoidLabelOverlap: false, //设置数据标签引导线 labelLine: { show: true }, itemStyle:{ //设置每项之间的留白 borderWidth:7, borderColor:'#fff' }, //格式化数据标签 label:{ fontSize:17, fontWeight:'bold', color:'inherit', formatter: '{b}\n{d}%', }, data: [ //itemSyle是单项的背景颜色设置。 {value: 20, name: '0-12岁',itemStyle: { color: '#00d9ff' }}, {value: 20, name: '12-24岁',itemStyle: { color: '#fdbd45' }}, {value: 20, name: '24-40岁',itemStyle: { color: '#35b95d' }}, {value: 40, name: '40岁以上',itemStyle: { color: '#0261df' }}, ] } ] }; linb.setOption(linboption); } 可以看到已经用的是window.的写法，将作用域提升到了全局。 以下为json配置： { "name": "webpack_project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/preset-env": "^7.23.8", "babel-loader": "^9.1.3", "css-loader": "^6.9.0", "file-loader": "^6.2.0", "html-webpack-plugin": "^5.6.0", "mini-css-extract-plugin": "^2.7.7", "style-loader": "^3.3.4", "webpack": "^5.89.0", "webpack-cli": "^5.1.4" }, "dependencies": { "@babel/core": "^7.23.7", "echarts": "^5.4.3", "url-loader": "^4.1.1" } } 以下为webpack.config.js配置： ck()被我写在main.js中，不仅ck()不能使用，其他的也是is not defined。 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: { a1用户画像: './src/js/a1用户画像.js', a2体验活动: './src/js/a2体验活动.js', a4模板: './src/js/a4模板.js', a6数据报表: './src/js/a6数据报表.js', a1: './src/js/a1.js', a2: './src/js/a2.js', a3: './src/js/a3.js', a4: './src/js/a4.js', a44: './src/js/a44.js', a5: './src/js/a5.js', a6: './src/js/a6.js', domtoimage: './src/js/dom-to-image.min.js', echartsgl: './src/js/echarts-gl.min.js', echarts: './src/js/echarts.min.js', main: './src/js/main.js', vue: './src/js/vue.js', }, output: { filename: '[name].js', path: path.resolve(__dirname, 'dist'), }, externals:['html-docx'], module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'], }, { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], }, }, }, { test: /\.(png|jpe?g|gif|svg)$/, use: [ { loader: 'url-loader', options: { limit: 8192, // 小于8KB的图片将转换为 base64 编码，减少请求 name: './images/[name].[hash:8].[ext]', }, }, ], }, ], }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname,'./src/index.html'), filename: 'index.html', chunks: ['main','echarts','a1','a1用户画像'] }), new HtmlWebpackPlugin({ template: './src/a2体验活动.html', filename: 'a2体验活动.html', chunks: ['main','echarts','a2','a2体验活动'], }), new HtmlWebpackPlugin({ template: './src/a3体验项目.html', filename: 'a3体验项目.html', chunks: ['vue','main','a3'], }), new HtmlWebpackPlugin({ template: './src/a4模板.html', filename: 'a4模板.html', chunks: ['echarts','echartsgl','domtoimage',"htmldocx",'a4模板','a44'], }), new HtmlWebpackPlugin({ template: './src/a4文创转化.html', filename: 'a4文创转化.html', chunks: ["main",'a4','a4文创转化',], }), new HtmlWebpackPlugin({ template: './src/a5兴趣爱好.html', filename: 'a5兴趣爱好.html', chunks: ["main",'a5','a5兴趣爱好'], }), new HtmlWebpackPlugin({ template: './src/a6数据报表.html', filename: 'a6数据报表.html', chunks: ['echarts','echartsgl','main','a6','a6数据报表'], }), // ... 可以根据需要添加其他HtmlWebpackPlugin ], }; 已经参照将函数改为了全局作用域但仍无效果。 根据chatgpt回答将 ck() zhexianRequest() 更改为： window.onload = function() { // 提供一个包含 liaData 和 libData 的对象给 ck() 函数 ck({ liaData: 'someData', libData: 'someOtherData' }); // 在 ck 函数执行后调用 zhexianRequest zhexianRequest(); }; 其他分页也做过类似修改，仍无作用，ck()在某一次运行时成功运行了，但忘记了是做了什么修改