webpack配置(一)——失败

最新推荐文章于 2024-12-20 16:45:00 发布
最新推荐文章于 2024-12-20 16:45:00 发布
阅读量293 收藏 1
点赞数
分类专栏： 日记
本文详细记录了从零开始配置Webpack与Babel的过程，包括初始化项目、安装依赖、配置环境及解决过程中遇到的版本冲突问题。适合初学者跟随实践。

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

原网址https://github.com/KieSun/webpack-demo

webpack配置

初始化

  1. 进入目录
  2. npm init (创建package.json)

webpack配置

初始化

  1. 进入目录
  2. npm init (创建package.json)

bec58a16.png
3. 安装webpack
npm install --save-dev webpack

dce0df26.png

  1. 创建文件
    79913901.png
    19930c60.png

  2. 写代码
    a74c20c7.png

  3. 安装webpack
    npm install --save-dev webpack

dce0df26.png

  1. 创建文件
    79913901.png
    19930c60.png

  2. 写代码
    a74c20c7.png

  3. 简单配置webpack
    在这里插入图片描述

  4. 初始化webpack
    在这里插入图片描述
    在这里插入图片描述

  • 出错，尝试解决
    npm i webpack webpack-cli -D
    在这里插入图片描述
  • 似乎解决了
    在这里插入图片描述
  • 提交保存下
    在这里插入图片描述

9.安装babel

  • 安装三个依赖包
    npm i --save-dev babel-loader babel-core babel-preset-env
    在这里插入图片描述
  1. 配置失败

主要似乎是版本的问题
重新安装下

一文大白话讲清楚webpack基本使用——5——babel的配置和使用
xiaobangkeji的博客
01-20 1357
一文大白话讲清楚webpack基本使用——5——babel的配置和使用
一文大白话讲清楚webpack基本使用——2——css相关loader的配置和使用
最新发布
xiaobangkeji的博客
01-18 1613
一文大白话讲清楚webpack基本使用——2——css相关loader的配置和使用
webpack配置报错
youyou_LIN的博客
04-14 2920
错误：ERROR in ./react/index.jsModule parse failed: Unexpected token (8:12)You may need an appropriate loader to handle this file type.||         return(|             <h1>123</h1>|         )|...
webpack配置中出现的错误记录
qq_38833195的博客
09-09 428
Fault: Module build failed: ReferenceError: window is not defined. A: 修改loader 错误: loader: ExtractTextPlugin.extract("style-loader!css-loader!less-loader") 解决方法: loader: ExtractTextPlugin.extract...
webpack配置问题
weixin_29351003的博客
04-20 551
前端打包工具——Webpack配置问题   最近刚刚接触webpack这款打包工具，遇上了许许多多的小问题，而且整个理解也很混乱，因为webpack有1.0和2.0的区别，同时他又有许多别的插件和依赖，导致版本之间存在一定的问题，这里我整理了一下，关于webpack+react配置出现的一些小问题。 问题一：自动打包。 自动打包，我之所以归类为问题，是因为自己在开发的时候也犯糊涂。一开始接
安装webpack失败的解决办法
qq_32269967的博客
07-14 697
执行命令 npm cache clean -f 这个命令是用来 清楚node的缓存的 而后安装成功
webpack局部安装、配置与使用时的报错记录与解决方案
weixin_67665876的博客
11-08 3560
新手webpack配置时，容易遇到的Bug合集。
重学webpack5——开发环境配置
果冻
04-23 754
一、创建配置文件 跟前面一样，先创建 npm init npm i webpack webpack-cli -D 创建webpack配置文件webpack.config.js 作用：指示webpack干哪些活（当你运行webpack指令时，会加载里面的配置） 所有构建工具都是基于node.js平台运行的，模块化默认采用commonjs ...
cli dll打包 vue_webpack进阶——DllPlugin优化打包性能（基于vue-cli）
weixin_39636164的博客
12-29 371
本文主要介绍两个插件：DllPlugin和DllReferencePlugin，后者配合前者使用。Github地址：dll-test介绍：打包会输出一个类dll包(dll包源于windows的动态链接库)，这些代码本身不会执行，主要是提供给我们的业务代码引用。(比如dll中有一个工具方法为时间格式化，这个方法本身并不会执行，但是当我们的业务中需要执行时间格式化时，就会引用这个方法在我们的业务中执行...
初识 Webpack (七) 其他配置(制定css、js添加域名，解析html中的image，跨域、devtool定位css和js异常位置、clean插件、图标等)
Sicily_winner的博客
01-27 1310
目录 ◆打包图片处理 3个文件基础直接跳转至此操作： 3个文件操作结束 ◆ 打包css和image分别指定文件夹（） ◆ 访问图片时加上域名 ◆ 代理服务器 ◆ webpack其他属性（跨域） ◆ devtool配置（定位异常） 文章 前言 内容 ✔生产环境 js定位异常位置 ✔ 生产环境 css 定位异常位置 ◆ clean-webpack-plugin（...
in ./node_modules/html-entities/lib/index.js终端报错
爬楼梯的前端小白的博客
08-12 1623
error in ./node_modules/html-entities/lib/index.js Module build failed: Error: ENOENT: no such file or directory, open '/Users/mac/Desktop/shop/node_modules/html-entities/lib/index.js' 出现这个报错后重新执行命令： npm i qs 之后即可正常运行 ...
Node中使用webpack打包时出现的错误和警告
ZQD的博客
05-23 3006
错误描述 ERROR in ./node_modules/destroy/index.js Module not found: Error: Can't resolve 'fs' in 解决方案 在webpack的配置文件中，一般我们定义为webpack.config.js,中添加 target: 'node', 错误描述 WARNING in ./node_modules/mongoose/lib/index.js 11:28-64 Critical dependency: the req
如何解决 Webpack 构建中遇到的常见问题与错误
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
12-20 2269
在 Webpack 构建中，常见的问题和错误可能源自配置错误、缺少依赖、路径问题或性能瓶颈。通过逐步分析报错信息、安装缺失的依赖、优化配置和使用合适的插件，可以有效解决大部分 Webpack 构建问题。希望本文中的解决方案能够帮助你在开发中更高效地调试和优化 Webpack 配置。
webpack打包： 报错ERROR in ./src/index.jsModule not found: Error: Can‘t resolve
full_moon_的博客
11-15 2845
1. 创建一个webpack目录，在里面创建dist目录和src目录；在src目录中创建mathUtils.js和main.js。在使用webpack前端模块化打包工具时，出现 Error: Can't resolve。在终端输命令：webpack ./src/main.js ./dist/bundle.js。6. 在index.html中引用，运行index.html。5. dist目录下成功生成bundle.js。4. 使用webpack将两个js打包。报错，我的问题是因为。
webpack打包常见报错解决方案
qq_28749759的博客
02-21 1632
学习过程问题总结
webpack-internal:///./node_modules/vue/dist/vue.esm.js:629 [Vue warn]: Invalid prop: type check fail
老段的优快云的博客
01-04 7102
二级标题webpack-internal:///./node_modules/vue/dist/vue.esm.js:629 [Vue warn]: Invalid prop: type check failed for prop “dataSource”. Expected Array, got String with value “”. found in 这种报错 应该怎么修改 1、首先f12看一下我们报什么错 这个错 一看就是 data（）{ 这里边的错 } 换完以后还是报错， 改完一个错基本都
axios出现错误Uncaught runtime errors:handleError@webpack-internal:///./node_modules/webpack-dev-server
qq_51389038的博客
09-27 1161
在vue.config.js中devServer设置client: {overlay: false}就可以了。
webpack3 报错 Error in ./node_modules/@wangeditor/editor/dist/index.esm.js
m0_58565372的博客
09-07 6810
然后再npm run build 项目进行打包，再去运行项目就不报错了。找到自己项目中的webpack.base.conf.js文件。最近在写编译器的需求，经过研究，选择了。编译器，按照官网步骤安装使用，安装完引入。
webpack问题记录 解决Error: Cannot find module ‘node:fs/promises‘
o__o__o__o的博客
10-28 8234
项目安装bable打包工具后打包失败，出现Error: Cannot find module 'node:fs/promises'。
webpack-dev-server代理中安全处理身份验证cookie的解决方案
开发者需要在webpack配置文件中正确引入并使用该方法，以确保代理能够处理cookie的安全传输。 #### 9. 维护开发效率与安全 由于开发过程中可能需要频繁地切换后端服务环境，维护安全和效率的平衡非常重要。使用此类...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值