Webpack未知选项'--display-error-details‘

Webpack是一个现代化的静态模块打包工具，它主要用于将多个模块打包成一个或多个文件，以便在浏览器中加载。它是前端开发中常用的工具之一。

关于你提到的错误信息"Webpack未知选项'--display-error-details'"，这是因为在运行Webpack命令时使用了一个未知的选项"--display-error-details"。这个选项可能是一个拼写错误或者是一个不存在的选项。

在Webpack中，并没有名为"--display-error-details"的选项。正确的选项是"--display-error-details"，它用于在控制台输出详细的错误信息，以帮助开发者更好地调试和解决问题。

如果你想要查看Webpack的详细错误信息，可以使用正确的选项"--display-error-details"，例如：

webpack --display-error-details

这样，Webpack会在控制台输出详细的错误信息，包括错误的文件路径、行号以及具体的错误原因。通过这些信息，开发者可以更快地定位和修复错误。

关于腾讯云的相关产品和产品介绍链接地址，以下是一些与Webpack相关的腾讯云产品：

云服务器（CVM）：腾讯云提供的弹性计算服务，可以用于部署和运行Webpack打包后的应用程序。了解更多信息，请访问：云服务器产品介绍
云存储（COS）：腾讯云提供的对象存储服务，可以用于存储Webpack打包后的静态资源文件。了解更多信息，请访问：云存储产品介绍
云函数（SCF）：腾讯云提供的无服务器计算服务，可以用于运行Webpack打包后的应用程序的后端逻辑。了解更多信息，请访问：云函数产品介绍

请注意，以上提到的腾讯云产品仅作为示例，实际使用时应根据具体需求选择适合的产品。

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

有帮助

没帮助

相关·内容

webpack的watch选项不工作原因分析

使用vue-cli创建项目因为以前用过webpack，而vue-cli创建的项目底层其实还是使用webpack构建的，所以使用起来还是很简单的。...，更不会reload浏览器页面，webpack的watch选项失效了。...尝试按该问题中的说明在vue-demo/build/dev-server.js的23行加入watchOptions.polling选项，发现问题真的解决了。...webpack如何检测文件变动的，webpack默认是采用监听文件系统变动事件来感知文件变动的，如果开启这个选项，则会定时询问文件系统是否有文件变动。...现在开启这个选项，则功能正常，不开启功能不正常？而vue-cli的广大使用者并没有报告存在该问题。个人感觉不应该是webpack的这个功能有问题，还是应该是环境问题。

4.1K6 0

webpack入门——webpack的安装与使用

webpack的官网是 http://webpack.github.io/ ，文档地址是 http://webpack.github.io/docs/ ，想对其进行更详细了解的可以点进去瞧一瞧。...init $ npm install webpack --save-dev 通过以上命令全局安装了webpack,webpack命令可以使用了。...webpack --save-dev 我们看看下方的示例： var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin...三、运行 webpack webpack 的执行也很简单，直接执行 $ webpack --display-error-details 即可，后面的参数“--display-error-details”...基于 webpack 的入门指引就到这里，希望本文能对你有所帮助，你也可以参考下述的文章来入门： webpack入门指谜 webpack-howto 共勉~

1.4K8 0

Vuejs开发过程中一些常见问题的解决方法

webpack报错后，使用webpack --display-error-details可以排错 2.指令keep-alive 在看demo的时候看到在vue-router写着keep-alive，keep-alive...5.绑定value到Vue实例的一个动态属性上对于单选按钮，勾选框及选择框选项，v-model绑定的value通常是静态字符串（对于勾选框是逻辑值）： <!...这些情况让实例有未知数量的顶级元素，它将把它的 DOM 内容当作片断。片断实例仍然会正确地渲染内容。

6.6K3 0

使你的webpack插件变得更加优秀

开发一款优秀的插件功能固然重要，但是让开发者友好的进行使用也发挥着同样重要的作用呢，我们在使用公共的一些webpack插件时通常会按自己的理解和属性的命名来进行传值，很可能就因为意外的参数类型出现未知的问题...，[schema-utils](https://github.com/webpack/schema-utils)包可以为loader和plugin的选项做友好的类型验证，现在就让我们一起来通过使用schema-utils...准备一个最小Webpack插件演示选项校验 // ① 定义插件类 class HelloWorldPlugin { // ② 实现apply函数(固定写法),提供给编译器调用 apply...先看一下webpack插件的使用方式。...错误说明： webpack在加载webpack.config.js时发生错误；插件的options传入无效；选项的属性应该是类型；属性的描述信息。

4455 0

React 搭建开发环境

依赖 $ npm install webpack --save-dev 测试运行webpack （本例子的代码存放在：https://github.com/chkui/webpack-demo.../module.js')); 然后同样执行webpack打包命令： $ webpack ....webpack同样可以使用标准化配置文件来替代命令行中的各种参数。 webpack的配置文件是nodejs的文件，通常命名为 webpack.config.js。...它提供了一个输出调试信息的参数： $ webpack --display-error-details 调试运行webpack命令出错的时候使用。...webpack插件某些时候，webpack的常规功能无法满足我们的需求，我们可以为webpack开发插件，或者使用其他开发团队已经完成的插件。

1.5K1 0

React由0到1

7663 0

vue全局 CLI 配置——vue.config.js

需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。...需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。...允许对内部的 webpack 配置进行更细粒度的修改。...::: devServer Type: Object 所有 webpack-dev-server 的选项都支持。...API 服务器的字符串： module.exports = { devServer: { proxy: 'http://localhost:4000' } } 这会告诉开发服务器将任何未知请求

3K3 0

Week3-脚手架核心流程开发

program //Commander 使用.option() 方法来定义选项，同时可以附加选项的简介 .option('-d,--debug','booelan') //选项可以设置一个默认值。...program.on('optins:debug',function(){ if(program.debug){ process.env.LOG_LEVEL = 'verbose' } } 对未知命令监听二...： program.on('command:*',function(obj){ console.log(obj) console.log('未知的命令：' + obj[0])...webpack-cli touch webpack-config.js //webpack-config.js const path = require('path') module.exports...6-2 通过webpack target属性支持Node内置库 webpack的target使用 // npm i -S path-exists // bin/utils.js import pathExists

8923 0

vue.config.js 配置文件

css: { // 将组件内部的css提取到一个单独的css文件（只用在生产环境） // 也可以是传递给 extract-text-webpack-plugin 的选项对象...需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。...需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。...#devServer Type: Object 所有 webpack-dev-server 的选项都支持。注意：有些值像 host、port 和 https 可能会被命令行参数覆写。...：复制代码12345JSmodule.exports = { devServer: { proxy: 'http://localhost:4000' } } 这会告诉开发服务器将任何未知请求

2.8K0 0

揭开Vue异步组件的神秘面纱

通过本文，你可以了解Vue对于异步组件的处理过程以及webpack的资源加载过程。...vnode = createComponent(Ctor, data, context, children, tag); } else { // 其他未知标签...，也就是把该组件的选项和父构造函数的选项进行合并：上图中，子选项是App的组件选项，父选项是Vue构造函数的选项对象，对于components选项，会以父类的该选项值为原型创建一个对象，然后把子类本身的选项值作为属性添加到该对象上...加载组件资源 __webpack_require__.e方法先看__webpack_require__.e方法： __webpack_require__.e = function requireEnsure...__webpack_require__方法这个方法是webpack最重要的方法，用来加载模块： function __webpack_require__(moduleId) { // 检查模块是否已经加载过了

5872 0

VuePress教程之深入理解插件API

enhanceAppFiles 此选项接受指向增强文件的绝对文件路径或返回该路径的函数，你可以通过此选项做一些应用配置。...在 CAC 解析参数前，VuePress 会检查 node 版本、注册core commands （opens new window）并处理包含你定制指令的未知指令。...vuepress hello docsextendCli Dev 建立 webpack 配置 VuePress 把 webpack 配置拆分成三个文件：base、client、server。...在此段落我们只在乎 client image.png 配置：来看看对应的 API 吧： define VuePress 特别开辟了一个更简洁的 define 选项。...chainWebpack 使用 webpack-chain 来修改内部的 webpack 配置。 VuePress会在 webpack 配置中下许多功夫。

1.2K1 0

Sourcemap入门

直接使用 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 可以替代使用 devtool 选项这两个插件是对 devtool 配置的补充，进行更细粒度的配置...，它有更多的选项，可以配置 soucemap 的绝对地址等。...plugins: [new webpack.SourceMapDevToolPlugin({})], }; 注意：不要同时使用 devtool 选项和 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin...因为 devtool 选项已在内部添加过这些插件了，如果二者同时使用，将会应用两次插件。四、两个问题通过插件，理论上已经能够实现我们的需求了，然而，理想是美好的，现实却有点残酷。...因为相对路径的请求会默认请求到业务域名上去，一个原因是会造成不必要的垃圾请求，另一个原因就是 sourcemap 本身不建议部署到应用服务器上，因为这会让一些坏人更容易获取、解析和调试到应用的源码，造成未知风险

2K2 1

Webpack多页面项目转Vite升级初尝试

不同，Vite是基于html作为入口，而Webpack是基于Js作为入口。...这一点和Webpack完全不同，Webpack会将各模块提前打包进bundle里，但打包的过程是静态的，就是在修改某一处代码后，会把所有模块进行打包，这样的坏处就是随着项目越来越大打包后的 bundle...也越来越大(当然Webpack也提供了很多类似bable-cache等插件来提高效率)，即使这样Webpack依旧会执行打包这个过程，这样对比Vite来说确实不够优雅，因为vite来说，借住ESM它直接省去了打包这个过程...未知性现在Vite2出来没多久，社区还没有很多大型项目实践，是否还有很多坑有待观望构建不一致这也是我最担心的一点，开发的时候使用ESM方式进行开发，打包的时候使用Rollup进行打包，也就是说使用了两套方式...9.964s 18.829s 0.827s 4.347s 11.981s 26.57s vite 0.694s 1.5s 未知(<50ms) 未知(<50ms) 8.8s 27.09s 在打包效率上基本一致

1.9K3 0

uni-app 安装 scss 引发的报错

node_modules\sass-loader\dist\index.js:30:29) at runLoaders (D:\Project\前端\小程序\memberShip\node_modules\webpack...} 这里说选项有个未知属性 prependData 于是我去代码里全局搜索这个属性，果然发现了猫腻这里可以看到 sass 版本高于 8 的时候，使用下面的配置我安装 sass-loader 的时候没有指定版本

2.4K2 0

前端黑科技：让Webpack项目一键支持Vite

Webpack -> Vite Vite 2.0发布一段时间了很多朋友由于种种原因无法尝试在项目中使用最近我在思否看有人发的文章，一键让你的webpack支持vite 安装wp2vite npm install...-g wp2vite 安装完成后，进入你的项目根目录 cd yourProjectRootPath 进入根目录后，执行命令wp2vite --config=后面跟上你的webpack配置文件，例如.../webpack.config.js // 传递配置文件执行以后：安装新的vite所需依赖： npm i npm run dev 你可能还是会跑不起来，这里注意几个点：项目依赖必须是支持ESM...的，建议安装package@next版本的热更新不需要之前的那些插件了,vite.config.js里面已经帮忙声明好了，可以删除一些未知问题原理：1.读取package.json里面的依赖信息...2.读取webpack配置文件 3.转换webpack的配置为vite配置 4.输出index.html和vite.config等文件 5.增加package.json里面的vite依赖信息源码地址：

4442 0

10分钟学会前端工程化（webpack5.0）

why optimization bailed out for modules [boolean] --display-error-details...多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。...由于插件可以带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例。根据你的 webpack 用法，这里有多种方式使用插件。...属性值是false或者压缩选项值。默认false不对html文件进行压缩。...html-webpack-plugin中集成的html-minifier，生成模板文件压缩配置，有很多配置项，这些配置项就是minify的压缩选项值。

2.9K1 0

WebPack 模块化打包工具（上）

(非全局安装需使用node_modules/.bin/webpack) 命令就可以了，该命令会自动引用webpack.config.js文件中的配置选项除了这种方式之外，我们还可以对 npm 进行配置...Source Map，但是对打包后输出的 JavaScript 文件的执行具有性能和安全的隐患，在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项 cheap-module-eval-source-map...上述选项由上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的打包速度的后果就是对打包后的文件的的执行有一定影响，对小到中型的项目中，eval-source-map是一个很好的选项，并且只应该开发阶段使用它...，同样的，我们这里选用的是eval-source-map选项，配置如下: // webpack.config.js module.exports = { devtool: 'eval-source-map...作为 webpack 配置选项中的一项，以下是它的一些配置选项，更多配置可参考 DevServer devserver的配置选项功能描述 contentBase 默认 webpack-dev-server

5235 0

Webpack 打包 commonjs 和 esmodule 模块的产物对比

这篇文章不涉及 Webpack 的原理，只是观察下 Webpack 对 commonjs 和 esmodule 模块打包后的产物，读完后会对模块系统有个更深的了解。...npm i -D webpack webpack-cli webpack-dev-server 更详细的过程可以参考 2021年从零开发前端项目指南小试牛刀先简单写行代码测试一下： // src/...__webpack_require__ ) => { __webpack_require__.r(__webpack_exports__);...的值，但执行会发现 add 函数执行后 PI 的值就发生了改变： image-20220503114207675 对于原始值， commonjs 就做不到上边的事情了，一般情况下也不要这样搞，以防出现未知...= 3; console.log(PI, "1+1=", add(1, 1)); image-20220503115321218 在 commonjs 中就无所谓了，但同样也不要这样搞，以防出现未知

5863 0

Webpack系列——快速入门

/image/logo.svg'; 插件插件的目的在于解决loader解决不了的事情，使用插件指定plugins选项即可，需要注意的使用插件需要引入插件。...可以将编译后的代码映射回原始代码位置，指定devtool选项即可： const config = { // .......web服务器，并能够实时重新加载使用webpack需要先安装： npm i --save-dev webpack-dev-server 在配置文件中指定devServer选项，告诉服务器在哪里寻找文件...此时服务将运行在8080端口，其中open选项表示服务开启之后立即在默认浏览器中打开页面。...开启热更新开启热更新很简单，只需要更新webpack-dev-server配置，增加hot选项，同时使用webpack自带的HMR插件 const config = { // ....

6543 0

Webpack系列——关于Webpack-dev-server配置的点点滴滴

我们都知道webpack-dev-server为我们在开发的时候提供了一个服务器以便于我们的开发，我们在使用之前当然需要安装： npm i webpack webpack-dev-server -D 安装完成之后我们只需要在...webpack配置中配置devServer选项即可，以下是一个简单的配置： const path = require('path'); const webpack = require('webpack'...上面的webpack-dev-server中指定了contentBase和hot为我们做了我们的任务，那么除了这两个配置选项，webpac-dev-server还有那些配置选项呢？...我将webpack-dev-server中的配置选项进行简单分类，总结如下：和访问地址有关 port：指定服务器的端口号，webpack-dev-server默认的端口号是8080 host：指定host...webpack-dev-server使用的是http-proxy-middleware这个包，配置的选项与其一致。

9046 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云