问题：
javascript - webpack打包后js代码失效，函数功能出现not defined，请问应该怎么解决？
阮阳曦
webpack打包后js代码失效，函数功能出现not defined。
lib()等代码是使用echarts插件绘制的，在a6和a4模板中还使用了echarts-gl,a4模板中还使用了html-docx.js，dom-to-image.min.js，实现了截图并导出为word
这样看着可能不太方便，提供源码链接:https://wwgm.lanzouj.com/iGHI61l5ky5c
在html中的引用方式为：
<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <title>用户画像</title> <!-- <script src="./js/a1用户画像.js"></script> <script type="text/javascript" src="./js/main.js"></script> <script src="./js/echarts.min.js"></script> <link rel="stylesheet" type="text/css" href="./css/a1用户画像.css"> <link rel="stylesheet" type="text/css" href="./css/main.css"> --> </head> <body id="body"> <script> window.onload = function() { // 提供一个包含 liaData 和 libData 的对象给 ck() 函数 ck({ liaData: 'someData', libData: 'someOtherData' }); // 在 ck 函数执行后调用 zhexianRequest zhexianRequest(); }; </script> <div class = "a"> <!--左侧导航栏--> <div class = "left"> <div class="a1" align="center"> <img src="./images/切图/图标/体验大数据分析系统文字.png"> </div> <div class="a2-1"> <a href = "index.html"><img src="./images/切图/图标/用户画像选中.png" width="20px" height="20px"> 用户画像分析</a> </div> <div class="a2"> <a href = "a2体验活动.html"><img src="./images/切图/图标/体验活动.png" width="20px" height="20px"> 体验活动分析</a> </div> <div class="a2"> <a href = "a3体验项目.html"><img src="./images/切图/图标/体验项目.png" width="20px" height="20px"> 体验项目分析</a> </div> <div class="a2"> <a href = "a4文创转化.html"><img src="./images/切图/图标/文创转化.png" width="20px" height="20px"> 文创转化分析</a> </div> <div class="a2"> <a href = "a5兴趣爱好.html"><img src="./images/切图/图标/兴趣爱好.png" width="20px" height="20px"> 兴趣爱好分析</a> </div> <div class="a2"> <a href = "a6数据报表.html"><img src="./images/切图/图标/数据报表.png" width="20px" height="20px"> 数据报表导出</a> </div> </div> <!--右侧内容区--> <div class="right"> <!--上方按钮 --> <div class="a3"> <div class="a3-1"> <p class="a3-1-1">选择时间</p> </div> <div class="a3-2"> <input type="date-webkit-datetime-edit-text" value="2023-01-01" class="a3-2-1" /> </div> <div class="a3-3"> <p class="a3-3-1">选择活动</p> </div> <div class="a3-4"> <select onchange="window.open(this.options[this.selectedIndex].value)" id="a3-4-1" > <option value="a1用户画像.html">中秋节活动</option> <option value="a2体验活动.html">国庆节活动</option> <option value="a3体验项目.html">元旦活动</option> <option value="a4文创转化.html">春节活动</option> </select> <!-- <script> $(function(){ $("#select").change(function(){ var op=$("#select").find('option'); op.get(0).selected=true; }); }) </script> --> </div> </div> <!--折线图--> <div id="lina" class="lina"> <!-- <script type="text/javascript">lia()</script> --> </div> <!--环状图--> <div class="b1"> <div id="linb"> <script type="text/javascript">lib()</script> <hr class="linb-1"> </div> <div class="b1-1"> <p>年龄段建议：</p> </div> <div class="b1-2"> <p> 0~12岁 20%：节假日人数偏多,建议举办手工体验活动<br> 12~24岁 20%：节假日人数偏多,建议举办非遗课堂传播知识<br> 24~40岁 40%：节假日客流占比较大部分,建议吸引文创转化<br> 40岁以上 20%：人群客流稳定,建议吸引文创转化</p> </div> </div> <div class="b2"> <div class="b2-1"> <p>用户性别</p> </div> <div class="b2-2"> <img src="./images/切图/用户画像分析进度条/女性.png"> </div> <div class="b2-3"> <p>女性</p> </div> <div> <img class="b2-6" src="./images/切图/用户画像分析进度条/圆角矩形 2 拷贝.png"> <img class="b2-5" src="./images/切图/用户画像分析进度条/橙色.png"> </div> <div class="b2-4"> <p>40%</p> </div> <div class="b2-7"> <img src="./images/切图/用户画像分析进度条/男性.png"> </div> <div class="b2-8"> <p>男性</p> </div> <div> <img class="b2-11" src="./images/切图/用户画像分析进度条/蓝色.png"> <img class="b2-10" src="./images/切图/用户画像分析进度条/圆角矩形 2 拷贝.png"> </div> <div class="b2-9"> <p>60%</p> </div> <!-- 用户性别建议 --> <div class="b2-12"> <hr width="98%"> <div class="b2-12-1"> <img src="./images/切图/用户画像分析进度条/色块.png"> </div> <div class="b2-12-2"> <p>用户性别建议：</p> </div> <br> <div class="b2-12-3"> <p>根据参与活动用户的性别比例,调整文创转化物品的人群偏好</p> </div> </div> </div> <div class="b3"> <div class="b3-1"> <img src="./images/切图/用户画像分析进度条/色块.png"> </div> <div class="b3-2"> <p>44444444</p> </div> <div class="b3-3"> <p>33333333</p> </div> </div> </div> </div> </body></html>打包后会自动生成头文件，所以原先的头文件被我注释掉了
以下为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 < 950) { w = 950; } if (h < 480) { h = 480; } // 缩放比例 let r = w / cw < h / ch ? w / cw : h / ch body.style.transform = `scale( ${r})` // 因为scale是以body的原中心点为基准进行缩放，所以缩放之后需要调整外边距，使其位于窗口的中心位置 body.style.marginLeft = (-(cw - r * cw) / 2 + (w - r * cw) / 2) + 'px' body.style.marginTop = (-(ch - r * ch) / 2 + (h - r * ch) / 2) + 'px' body.style.marginBottom = (-(h > 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 ],};已经参照https://segmentfault.com/q/1010000005148735将函数改为了全局作用域但仍无效果。
根据chatgpt回答将
<script>ck()</script>
<script>zhexianRequest()</script>
更改为：
<script> window.onload = function() { // 提供一个包含 liaData 和 libData 的对象给 ck() 函数 ck({ liaData: 'someData', libData: 'someOtherData' }); // 在 ck 函数执行后调用 zhexianRequest zhexianRequest(); };</script> 其他分页也做过类似修改，仍无作用，ck()在某一次运行时成功运行了，但忘记了是做了什么修改
共有1个答案
景胜涝
因为生成的index.html中，引入 js 添加了 defer。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/scr...
类似资料：
-
被扫出安全漏洞，可以直接在源码中找到接口请求地址，这个可以避免吗？ 部署服务器后也能直接看到 使用 webpack-obfuscator 进行代码混淆，只有主文件进行了混淆 项目有点老，没有用vue-cli,直接用的webpack，后面自己升级到了webpack5 打包后的目录：只有红框中的文件混淆了 以下是我的webpack配置信息
-
我用recordRTC.js录制了共享屏幕，然后有新用户加入的时候，停止录制，存下recordRTC.getBlob()的blob, 重新开启录制，点录制完成按钮，再存下recordRTC.getBlob()的blob，最后取出存下的所有blob，用New Blob（）合并，合并后用URL.createObjectURL（）转换blob并且下载，为什么播放的时候合并的blob，只能播放第一个blo
-
在做html导Excel的样式，需要设置Excel表格打印预览的缩放比例以及页边距，查阅众多资料，只有修改xlsx-style的源码可以解决，可是修改源码后，怎末修改webpack打包后也能生效，求大神指教
-
上传文件的功能是后端来做 点击浏览按钮能弹出选择的文件夹 点击上传的按钮需要调接口完成上传功能 下面是定义的接口和后端postman截图 只要传一个path就可以了，请问应该在Upload方法里面怎么调用接口把需要上传的文件传给后端呢
-
vue3+vite打包的时候，报错Access is denied，请问怎么解决啊？重新装了node_modules包，用nvm试了npm的几个版本都不行
-
请问通过webpack打包为esm包，npm link后包空对象，请问是怎么回事？导出的包有编译，npm link后得到的是{}对象 两个文件metab.ts： 入口文件metas.ts引入metab.ts： 这样打包后npm link，在其他项目里导入metas.ts，得到是一个空对象{}，如果我把metas.ts去掉import，直接写上值可以得到结果 请问不能import是怎么回事呢？我的w