webpack常见错误的解决办法

最新推荐文章于 2025-03-12 10:21:50 发布

原创最新推荐文章于 2025-03-12 10:21:50 发布 · 4.3k 阅读

CC 4.0 BY-SA版权

本文介绍了在安装和使用webpack过程中遇到的常见问题及其解决方法，包括安装失败、配置文件创建、webpack-dev-server的启用，以及针对不同错误的解决策略，如警告处理、HotModuleReplacementPlugin的使用和'webpack is not defined'的错误修复。

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

项目列表
在这里插入图片描述

1、安装webpacke
//在本项目中安装webpack，–save-dev的意思是将依赖写入项目的package.json文件
npm install --save-dev webpack
在这里插入图片描述
安装过程中如果出现类似上述的提示，说明安装的版本不对，根据提示安装对应的版本
npm install --save-dev webpack@4.29.6
此时，运行webpacket -v会显示不是内部命令，说明webpacket没有安装成功

解决方法：
D:\te>npm install -save-dev webpack-cli
D:\te>npm install -global webpack
D:\te>npm install -global webpack-cli
在这里插入图片描述
说明webpacke安装成功

2、配置webpacke配置文件
（1）在项目的根目录创建webpack的配置文件webpack.config.js
在这里插入图片描述
（2）在根目录创建在 .babelrc文件

安装安装并启用webpack-dev-server
输入npm install --save-dev webpack-dev-server

3、常见问题的解决方案
（1）此时查看预览效果，出现下面的警告，说明项目打包进文件失败
在这里插入图片描述
解决方法：
项目目录下输入：
D:\te>webpack -mode development
D:\te>webpack -mode production

此时，在package.json文件中会出现
“scripts”: {
“start”: “webpack”,
“dev”: “webpack --mode development”,
“build”: “webpack --mode production”
},
执行npm run dev,出现：
在这里插入图片描述
说明项目打包完成
（2）此时运行public/index.html文件，浏览器会出现错误提示

解决方案：
在webpacke的配置文件中加上webpack.HotModuleReplacementPlugin这个插件
即：
plugins: [
new webpack.HotModuleReplacementPlugin()
],
（3）ReferenceError: webpack is not defined
继续npm run dev，会出现ReferenceError: webpack is not defined：即：创建webpack配置文件后，运行webpack操作出错：
在这里插入图片描述
解决方案，在webpacke配置文件的第一行加入：var webpack = require(‘webpack’);