webpack打包测试一些问题

最新推荐文章于 2023-04-21 10:42:54 发布

原创最新推荐文章于 2023-04-21 10:42:54 发布 · 321 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

7 篇文章

订阅专栏

本文分享了在使用Vue和Webpack过程中遇到的常见错误及解决方案，包括Vue实例方法声明错误、Webpack版本冲突、npm start报错等，为开发者提供实用的故障排除指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、启动项目后自动跳转至页面，页面闪了一下就白屏了，日志中也没有报错。
在这里插入图片描述
打开F12发现console里边有错误，提示找不到change方法，我在source中的index.html可以看到已经引入了build.js。但在build.js中搜不到change方法，说明我的方法没有声明出来，最后发现是我的vue实例中的method改成menthods就好了。《这是一个语法问题，粗心。。》
在这里插入图片描述
二、webpack4.0以后的版本需下载webpack-cli,下载时提示npm和nodejs版本问题，见下图，因为我之前装的nodejs和npm版本不匹配，试了各种办法发现npm版本怎么都没法改过来然后我咬牙删了npm并卸载了nodejs,在网上重新下了最新的nodejs后问题解决了。
在这里插入图片描述

三、当执行npm run dev时报错，一直提示如下

在这里插入图片描述

查看了系统安装的webpack和webpack-cli都已经安装没问题，网上看了下，webpack4以上版本webpack-cli在一个分开的包里，预估可能还是版本问题，于是又是一波卸载和安装。
1、卸载webpack，对应命令：
npm uninstall webpack -g
npm uninstall webpack-cli -g
2、然后再全局安装webpack和本地安装：
cnpm install webpack webpack-cli –g
cnpm install webpack webpack-cli --save-dev //怕再出错，这条在我的项目单独目录下执行。
这样再执行打包命令，就不会报错了。
四、下面的问题是我的项目下安装了webpack-dev-server,然后又在项目下的目录下又安装了webpack-dev-server,系统就混乱了，一直报这个错。最后我重新建立项目，只在一个需要启动的目录下安装了webpack-dev-server,最后问题解决。如果这个还不能解决，可能是入口文件路径配置错了，我试着改了改好了。
在这里插入图片描述
五、解决 npm start 报错 Error: Cannot find module ‘XX’ 的问题，在启动项目时,npm run dev 启动不了本地服务, 报错缺少xx模块导致启动不了localhost本地服务
主要就是安装nodejs时,缺少’XX’这个模块,自己手动安装上这个模块就行了–>cnpm install ‘XX’ --save
以上办法，需要手动一个一个添加，太麻烦。经过尝试，可在项目目录下本地安装webpack-cli也可解决，命令如下：cnpm install webpack webpack-cli --save-dev
六、启动项目包错，控制台显示一堆乱码（忘记截图），这种情况是jar包不完整，需要将node_modules的所有包都删除了，然后重新下载-cnpm install。