开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在webpack更新后无法解析'./src‘-如何调整以前的工作配置？

在webpack更新后无法解析'./src'，需要调整以前的工作配置。首先，我们需要了解webpack和它的配置文件。

Webpack是一个现代的JavaScript应用程序的静态模块打包工具。它将应用程序的所有模块作为一个依赖关系图，并生成一个或多个打包文件。Webpack的配置文件是一个JavaScript文件，用于指定打包的入口、输出路径、加载器、插件等。

要解决无法解析'./src'的问题，可以按照以下步骤进行调整：

确认webpack版本：首先，确认你使用的webpack版本。可以通过在命令行中运行webpack -v来查看版本号。如果版本较旧，可以考虑升级到最新版本。
确认webpack配置文件：找到你的webpack配置文件，通常命名为webpack.config.js。如果没有该文件，可以创建一个。
配置入口：在webpack配置文件中，找到entry字段，确保入口路径正确。通常情况下，入口文件是./src/index.js，你可以根据你的项目结构进行调整。
配置输出：在webpack配置文件中，找到output字段，确保输出路径正确。通常情况下，输出路径是./dist，你可以根据你的项目需求进行调整。
配置解析：在webpack配置文件中，找到resolve字段，添加或修改extensions字段。例如，可以将extensions设置为['.js', '.jsx']，以支持解析JavaScript和React文件。
配置加载器：在webpack配置文件中，找到module字段，添加或修改rules字段。加载器用于处理不同类型的文件，例如Babel加载器用于处理ES6语法。根据你的项目需求，添加适当的加载器。
配置插件：在webpack配置文件中，找到plugins字段，添加或修改插件。例如，可以使用HtmlWebpackPlugin插件生成HTML文件。
运行webpack：保存并关闭webpack配置文件后，在命令行中运行webpack命令，开始打包你的应用程序。如果一切配置正确，应该能够成功解析'./src'并生成打包文件。

总结起来，调整以前的工作配置需要确认webpack版本、配置入口和输出路径、配置解析、配置加载器和插件，并运行webpack进行打包。这样就能解决无法解析'./src'的问题。

腾讯云相关产品和产品介绍链接地址：

腾讯云Webpack文档：https://cloud.tencent.com/document/product/1214
腾讯云云服务器CVM：https://cloud.tencent.com/product/cvm
腾讯云对象存储COS：https://cloud.tencent.com/product/cos
腾讯云云函数SCF：https://cloud.tencent.com/product/scf
腾讯云CDN加速：https://cloud.tencent.com/product/cdn

相关搜索:为什么我的webpack版本在添加了webpack配置的解析选项后工作得这么奇怪？使用Vue CLI的Webpack在依赖项更新后不工作在Centos7上进行内核更新后，Vicidial上的Cpan无法工作在决定不更新数据后，如何将以前的数据检索到文本框中？在蒙特利更新后，python中的applescript无法工作如何使函数在更新后的状态下工作？如何解决：“无法解析模块...”在使用yarn工作区的react-native中？我的sql服务器在Mac更新和重启后无法工作-错误2002 (HY000)：无法通过套接字'/tmp/mysql.sock‘连接到本地MySQL服务器光猫dns 免域名备案

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

腾讯 IMWeb 团队的前端构建秘籍

webpack 也是众多构建工具中崭露头角一员，早期的 webpack 配置复杂难懂，随着其发展，相关配置也不断简化，性能也不断提高，但是对于深入使用的开发人员，通常它的默认配置并不适用于业务开发，需要针对自己业务调整适配...你对 webpack 了解多少？如何针对业务集成最佳配置？如何优化开发体验？如何开足马力，实现极速的 webpack 的构建性能？又会有哪些坑？本文带你解答这些问题。.../src/index.js', },}; 多页面应用入口配置和单页面应用类似，但不同页面会不同有入口文件，这种情况高效的做法就不是直接写死在 entry 里面了，而是通过生成 webpack.config...node 服务需要的html/js通过webpack插件动态输出，当nodemon检测到变化后将自动重启，html文件中的静态资源全部替换为dev模式下的资源，并保持socket连接自动更新页面。...四、收敛配置集成最佳实践构建的配置和优化的工作并不小，将最佳实践收敛和集成为独立的模块，在不同项目中复用，可以大幅减少构建维护工作，以及后续升级优化工作难度。

1.4K3 0

一小时的时间，上手 Webpack

因为像es6、less及sass、模板语法、vue指令及jsx在浏览器中是无法直接执行的，必须经过构建这一个操作才能保证项目运行，所以前端构建打包很重要。...具体的我不再展开，总之前端构建工程化已经是趋势。至于为什么选择webpack，因为这个工具配置非常灵活，支持插件化扩展，社区生态很丰富，官方迭代更新速度快，作为程序员，这是一个靠谱的选择。.../index.js" type="text/javascript"> 看到这应该明白了吧，在src目录下面是开发内容，后面用 webpack 代码打包后...安装file-loader 执行以下命令，安装file-loader依赖 npm i file-loader -D 然后在webpack.config.js配置文件 module 节点下添加解析配置内容...当然，要真正达到应用水平，还要继续深入学习，webpack的内容还有很多，比如如何加载vue指令或者jsx语法，如何打包组件等，后面我会继续带来入门教程。

7872 0

精读《webpack4.0 升级指南》

typescript 以及 babel，只让他做我们需要的工作，剩下的丢给 webpack 处理，可以获得最大程度性能优化。...如果仅使用 webpack + typescript，建议将 ts 编译输出模式调整为 es3，因为 webpack 自带的压缩工具对 es6 语法还存在报错，而且也不会做兼容处理。...笔者发现 babel 直接解析 import 代码会无法处理，因此需要 stage-2 preset: { presets: [ ["env", { modules: false...我以前为了实现第一次编译完后立即打开浏览器的功能，写了一共 200 行的 customCompiler 以及 format-webpack-message，而且利用 koa 开了一个 server，利用...前端包体积优化效率一般和用户体验是违背的，既然下一个页面在另一个 chunk 中，用户点击后必然会产生 loading。

4781 0

Day01_webpack

main.js文件 2.1_webpack 更新打包目标: 以后代码变更, 如何重新打包呢新建src/tool/tool.js - 定义导出数组求和方法 export const getArrSum...[hash:6][ext]' } } webpack4及以前使用下面的配置 webpack.config.js - 准备配置 { // 处理字体图标的解析 test: /\....输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。...后续的部分(拿到增量更新之后如何处理？哪些状态该保留？哪些又需要更新？)...2) 不同的用法 Loader在module.rules中配置，也就是说他作为模块的解析规则而存在。

1.6K2 0

走近webpack（3）–图片的处理

大家好，又见面了，我是你们的朋友全栈君。　　上一章，咱们学了如何用webpack来打包css，压缩js等。这一篇文章咱们来学习一下如何用webpack来处理图片。废话不多说，咱们开始吧。　　.../images/dog.jpg); width: 500px; height: 500px; } 　　ok,我们写完了代码，现在webpack是无法解析的，我们可以打包试一下，发现会报错...这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件...，而我们以前所一起学习的webpack使用方法即包含了开发环境下的需求，又有生产环境下的内容，当我们要把整个项目打包上线的时候，我们会压缩js，压缩图片，整合资源以减少http请求，但是我们在开发环境下的时候...再有就是，我们在引入图片的时候，用的是绝对地址，也就是node起服务器后你本地的ip地址，如果不通过npm run server起本地服务器，是无法找到图片的。

5311 0

走近webpack（3）--图片的处理

/images/dog.jpg); width: 500px; height: 500px; } 　　ok,我们写完了代码，现在webpack是无法解析的，我们可以打包试一下，发现会报错...这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件...前边的内容，打包后的图片并没有放到images文件夹下，要放到images文件夹下，其实只需要配置我们的url-loader选项就可以了。...，而我们以前所一起学习的webpack使用方法即包含了开发环境下的需求，又有生产环境下的内容，当我们要把整个项目打包上线的时候，我们会压缩js，压缩图片，整合资源以减少http请求，但是我们在开发环境下的时候...再有就是，我们在引入图片的时候，用的是绝对地址，也就是node起服务器后你本地的ip地址，如果不通过npm run server起本地服务器，是无法找到图片的。

9607 0

【Webpack】320- Webpack4 入门手册（共 18 章）（下）

// webpack 生产环境配置文件 + ├─webpack.dev.js // webpack 开发环境配置文件由于我们文件调整了，所以在 package.json 中，打包命令也需要调整...调整 webpack.common.js 我们先调整 webpack.common.js 文件，将通用的配置保留，不是通用的配置删除，结果如下： // webpack.common.js const...十三、 webpack 热更新上一节介绍监控自动编译，当我们保存文件后，会自动编译文件，但是我们还是需要手动去刷新页面，才能看到编译后的结果。...解析模块拓展名和别名在 webpack 配置中，我们使用 resolve 来配置模块解析方式。...在解析过程中，我们可以进行配置： 1. resolve.alias 当我们引入一些文件时，需要写很长的路径，这样使得代码更加复杂。

2.3K2 0

你需要知道的webpack高频面试题_2023-03-15

对于不同类型的依赖，webpack有对应的模块加载器，而且会分析模块间的依赖关系，最后合并生成优化的静态资源。webpack的基本功能和工作原理？...webpack构建过程从entry里配置的module开始递归解析entry依赖的所有module每找到一个module，就会根据配置的loader去找对应的转换规则对module进行转换后，再解析出当前.../src/index.jsoutput 出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./dist什么是loader，plugins?...bundle是webpack打包出来的文件，chunk是webpack在进行模块的依赖分析的时候，代码分割出来的代码块。module是开发中的单个模块如何自动生成webpack配置？...在webpack中如何做到长缓存优化？

6622 0

你需要知道的webpack高频面试题

对于不同类型的依赖，webpack有对应的模块加载器，而且会分析模块间的依赖关系，最后合并生成优化的静态资源。webpack的基本功能和工作原理？...webpack视频讲解：进入学习webpack构建过程从entry里配置的module开始递归解析entry依赖的所有module每找到一个module，就会根据配置的loader去找对应的转换规则对module.../src/index.jsoutput 出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./dist什么是loader，plugins?...bundle是webpack打包出来的文件，chunk是webpack在进行模块的依赖分析的时候，代码分割出来的代码块。module是开发中的单个模块如何自动生成webpack配置？...在webpack中如何做到长缓存优化？

4882 0

「吐血整理」再来一打Webpack面试题

Loader 在 module.rules 中配置，作为模块的解析规则，类型为数组。每一项都是一个 Object，内部包含了 test(类型文件)、loader、options (参数)等属性。...，根据配置确定输出的路径和文件名，把文件内容写入到文件系统在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack...后续的部分(拿到增量更新之后如何处理？哪些状态该保留？哪些又需要更新？)...[ext]' } }] }] } } 11.在实际工程中，配置文件上百行乃是常事，如何保证各个loader按照预想方式工作...效率禁用 babel-loader 的模块依赖解析，否则 Webpack 接收到的就都是转换过的 CommonJS 形式的模块，无法进行 tree-shaking 使用 PurifyCSS(不在维护)

5932 0

「吐血整理」再来一打Webpack面试题

Loader 在 module.rules 中配置，作为模块的解析规则，类型为数组。每一项都是一个 Object，内部包含了 test(类型文件)、loader、options (参数)等属性。...，根据配置确定输出的路径和文件名，把文件内容写入到文件系统在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack...后续的部分(拿到增量更新之后如何处理？哪些状态该保留？哪些又需要更新？)...[ext]' } }] }] } } 11.在实际工程中，配置文件上百行乃是常事，如何保证各个loader按照预想方式工作...效率禁用 babel-loader 的模块依赖解析，否则 Webpack 接收到的就都是转换过的 CommonJS 形式的模块，无法进行 tree-shaking 使用 PurifyCSS(不在维护)

1.1K2 1

React 搭建开发环境

开发环境扩展——Linux下文件变化监控个数配置 webpack在linux下监控文件的变化用到了 Inotify机制。有可能在文件比较多的时候修改、编辑文件无法触发webpack热部署。...webstorm有文件缓存的功能，在编辑完毕保存之后并不会实时的更新磁盘文件，这样的就导致webpack的开发环境无法同步更新文件。...下面将继续在前文webpack的基础上继续说明如何开发react。...limit=25000' //只解析小于25000字节的图片 }] } }; 和前面介绍webpack的例子相比，这里的配置文件新增了了一个babel-loader的配置。...test后的正则表达式表示对所有的js或者jsx文件进行解析； exclude表示不解析npm安装目录下和bower安装目录下的文件； loader表示使用的解析工具； query表示扩展参数

1.5K1 0

React由0到1

开发环境扩展——Linux下文件变化监控个数配置 webpack在linux下监控文件的变化用到了 Inotify机制。有可能在文件比较多的时候修改、编辑文件无法触发webpack热部署。...webstorm有文件缓存的功能，在编辑完毕保存之后并不会实时的更新磁盘文件，这样的就导致webpack的开发环境无法同步更新文件。...下面将继续在前文webpack的基础上继续说明如何开发react。...limit=25000' //只解析小于25000字节的图片 }] } }; 和前面介绍webpack的例子相比，这里的配置文件新增了了一个babel-loader的配置...test后的正则表达式表示对所有的js或者jsx文件进行解析； exclude表示不解析npm安装目录下和bower安装目录下的文件； loader表示使用的解析工具

7563 0

【Cute-Webpack】Webpack4 入门手册（共 18 章）

1. webpack 模块介绍这里介绍的模块（module）是指 webpack.config.js 文件中的 module 配置，它决定了如何处理项目中的不同类型模块。...// webpack 生产环境配置文件 + ├─webpack.dev.js // webpack 开发环境配置文件由于我们文件调整了，所以在 package.json 中，打包命令也需要调整...调整 webpack.common.js 我们先调整 webpack.common.js 文件，将通用的配置保留，不是通用的配置删除，结果如下： // webpack.common.js const...十三、 webpack 热更新上一节介绍监控自动编译，当我们保存文件后，会自动编译文件，但是我们还是需要手动去刷新页面，才能看到编译后的结果。...解析模块拓展名和别名在 webpack 配置中，我们使用 resolve 来配置模块解析方式。

2.3K3 1

webpack（4.8.3）总结

webpack及webpack-cli安装后在初始化package.json,否则会报错) 项目目录结构如下(.idea、webpack.iml为编辑器自带文件) ?...如何使用css样式文件：在对应的脚本中使用import引入即可，如上图 module:{ rules:[ //js配置 ?...//sass配置 ? //图片配置 ? //字体文件配置 ? //html中引入图片配置(webpack4会自动匹配打包后的图片路径，也就是打包后的页面中引入的图片路径是正确的) ?...(), //开启模块更新的详细进度，在控制台或终端可见，如不需要，可不必配置 ] devServer:{ port:9001,//监听的端口 hot:true,//是否开启热更新...、purify-css插件 glob-all为解析多路径插件后在配置文件引入，如下 ?

7034 0

webpack（4.8.3）总结之一

webpack及webpack-cli安装后在初始化package.json,否则会报错) 4、根目录下创建webpack.config.js配置文件，如目录结构图，配置文件的具体配置内容将在基础配置中讲述...如何使用css样式文件：在对应的脚本中使用import引入即可，如上图 module:{ rules:[ //js配置 ?...//sass配置 ? //图片配置 ? //字体文件配置 ? //html中引入图片配置(webpack4会自动匹配打包后的图片路径，也就是打包后的页面中引入的图片路径是正确的) ?...(), //开启模块更新的详细进度，在控制台或终端可见，如不需要，可不必配置 ] devServer:{ port:9001,//监听的端口 hot:true,//是否开启热更新...、purify-css插件 glob-all为解析多路径插件后在配置文件引入，如下 ?

7874 0

【第8期】webpack入门学习手记（二）

在这个过程中主要有以下几点体会： 1、无法坚持原创日更的囧境。因为我的写作动机是自己的学习笔记、工作笔记的整理。也就是说，我要有不断学习和工作的过程，然后将这个过程遇到的问题和解决方法记录整理下来。...这就需要强制性的养成一些习惯，并且压缩掉一些自己以前花时间做的事情。目前这几件事情做到。但是我无法处理掉临时性突发的事件，尤其是处理起来比较费时间的事情。...因为我们在执行安装小节是，肯定已经在一个工作目录下，例如我的工作目录是webpackStudy，所以文档中创建新目录mkdir webpack-demo && cd webpack-demo省略掉。.../src/index.js"> 在工作目录下创建index.html文件，并创建src目录，然后创建index.js文件。文件的组织形式如上。...看看情况如何~ 创建一个打包文件首先调整一下我们的工作目录。创建一个dist目录，用来存放压缩和优化之后的代码。而我们之前创建的src目录，用来存放原始代码。

4901 0

Webpack DevServer和HMR原理

不需要手动npm run build 如何开启？方式一：在导出的配置中，添加watch:true module.exports = { entry: "....，又依赖于其他的一些资源，那么就需要指定从哪里来查找这个内容: 比如代码是这样的:; 这样打包后浏览器无法通过相对路径去找到这个文件夹; 所以代码是这样:; 如何让它去查找到这个文件的存在?...如何使用HMR？默认情况下，webpack-dev-server已经支持HMR，只需要开启即可。在不开启HMR的情况下，修改了源代码后，整个页面会自动刷新，使用的是live reloading。...如何可以做到只更新一个模块中的内容？...webpack-dev-server会创建两个服务：提供静态资源的服务（express）和Socket（net.Socket） Express Server负责直接提供静态资源服务（打包后的资源直接被浏览器请求和解析

1.8K3 0

Vue-Cli优化编译速度

vue-cli-service 暴露了 inspect 命令用于审查解析好的 webpack 配置。...--mode development > webpack.config.development.js 输入命令后，在根目录会生产一个webpack.config.production.js文件如果vue...文件夹，就可以开始跑项目了，因为这些插件都不需要编译，跑起来很流畅，修改后的热更新速度更是显著提升。...我以前修改一行代码热更新编译在30秒以上，使用这个以后基本十秒以内搞定。...guide/webpack.html 简单的配置方式调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象： // vue.config.js

3.1K2 0

webpack面试题

gulp是一个前端自动化构建工具，强调的是前端开发的工作流程，可以通过配置一系列的task，第一task处理的事情（如代码压缩，合并，编译以及浏览器实时更新等）。...自动化构建工具并不能把所有的模块打包到一起，也不能构建不同模块之间的依赖关系。如何自动生成webpack配置文件？ webpack-cli、vue-cli 什么是模热更新？有什么优点？...调整样式更加快速，几乎相当于在浏览器中更改样式 webpack-dev-server 和 http服务器的区别 webpack-dev-server使用内存来存储webpack开发环境下的打包文件，并且可以使用模块热更新...在webpack中如何做到长缓存优化？...输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。 8.在整个流程中webpack会在恰当的时机执行plugin里定义的逻辑

5803 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭