webpack打包后js代码失效，函数功能出现not defined，请问应该怎么解决？
站长
· 阅读数 5
webpack打包后js代码失效，函数功能出现not defined。lib()等代码是使用echarts插件绘制的，在a6和a4模板中还使用了echarts-gl,a4模板中还使用了html-docx.js，dom-to-image.min.js，实现了截图并导出为word在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个回答
test
2024-06-23
因为生成的index.html中，引入 js 添加了 defer。
ck 在 onload 中调用，js 已经执行，所以有效
lib 调用时，js 还未执行，所以无效
这个布尔属性的设置是为了向浏览器表明，该脚本是要在文档被解析后，但在触发 DOMContentLoaded 事件之前执行的。https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/scr...
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引，对解决问题有帮助
- 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容