错误:在webpack配置版本5中使用devtool="source-map“选项时出错
错误:在webpack配置版本5中使用devtool="source-map"选项时出错
答案： 在webpack配置版本5中使用devtool="source-map"选项时出错，可能是因为webpack版本5对于devtool选项的配置发生了变化。在webpack 5中，devtool选项的默认值已经改为了"eval"，而不再是"source-map"。因此，如果你想使用"source-map"选项，需要手动指定devtool的值为"source-map"。
devtool选项用于配置生成source map的类型，它可以帮助我们在调试代码时定位到源代码中的错误。"source-map"选项生成的source map文件会单独生成，并且会将源代码和编译后的代码完全分离，因此可以提供更好的调试体验。
在webpack配置中使用devtool选项时，可以将其设置为以下几种常用的值：
- "eval"：生成的source map以eval的形式嵌入到打包后的文件中，不会生成单独的source map文件。这是webpack 5中的默认值。
- "source-map"：生成单独的source map文件，提供最完整的源代码映射，但会增加打包时间和文件大小。
- "cheap-source-map"：生成单独的source map文件，但只包含行信息，不包含列信息，可以加快打包速度。
- "cheap-module-source-map"：生成单独的source map文件，同时包含行信息和模块边界，对于大型项目的调试很有用。
根据你的需求，你可以将devtool选项设置为"source-map"，然后重新运行webpack进行打包。如果你使用的是webpack 5及以上的版本，确保你的webpack配置文件中的devtool选项设置正确。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供弹性计算能力，满足各类业务需求。产品介绍链接
- 腾讯云云数据库MySQL版：提供高性能、可扩展的MySQL数据库服务。产品介绍链接
- 腾讯云对象存储（COS）：提供安全可靠的云端存储服务，适用于图片、音视频、文档等各类文件的存储和管理。产品介绍链接
- 腾讯云人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。产品介绍链接
- 腾讯云物联网（IoT）：提供全面的物联网解决方案，帮助用户快速构建和管理物联网应用。产品介绍链接
- 腾讯云区块链（BCS）：提供安全、高效的区块链服务，支持快速搭建和管理区块链网络。产品介绍链接
- 腾讯云音视频处理（MPS）：提供音视频处理和分发服务，包括转码、截图、水印等功能。产品介绍链接
- 腾讯云移动开发（MPS）：提供全面的移动开发解决方案，包括移动应用开发、移动推送、移动分析等。产品介绍链接
请注意，以上链接仅为示例，具体的产品选择和推荐应根据实际需求和情况进行评估。
相关·内容
在webpack中定义生产配置时出错
错误：
Uncaught ReferenceError: process is not defined
像console.log(process)这样的代码
process.env.NODE_ENV === "production"
if (process.env.NODE_ENV === "production") {
module.exports.devtool = "#source-map";
// http://vue-loader.vuejs.org/en/workflow/p
浏览 2提问于2019-06-13得票数 0
2回答
我正在将webpack 4迁移到webpack 5。
config/webpack.js有：
“开发工具: isProduction？“隐藏源-映射”：“廉价模块-标准源-映射”
迁移得到错误后：
"^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".模式onfiguration.devtool应该匹配
看起来新的webpack不喜欢条件，因为如果我更改为：
devtool: 'hidden-source-map'
错误消失了。
浏览 3提问于2021-01-29得票数 15
TL;DR
我需要在SourceMapDevToolPlugin中设置哪些配置选项来模拟devtool: 'source-map'
我必须使用SourceMapDevToolPlugin来避免为我的供应商modules....but生成源映射--我想要的是source-map样式映射，而不是inline-source-map。
详细信息：
我使用webpack 4，不想浪费时间生成vendor.js.map，所以我不能只设置devtool，而是这样做：
但我注意到这样的评论：
您可以使用以下代码替换配置选项devtool:内联源代码映射与等效的自定义插件配置：
为了我
浏览 2提问于2018-09-07得票数 9
1回答
我使用以下npm命令启动我的webpack-sev-server：
"start": "webpack-dev-server --progress --colors --port 8090 --open -d --inline --output-pathinfo"
在我的webpack配置中，我还拥有：
devtool: 'source-map'
但据我所知，这是无关紧要的，因为-d选项无论如何都会将devtool设置为sourcemap。
运行后，我可以在sources选项卡(Chrome)下看到单独的JS文件：
但它似乎并不比酒窝文档有
浏览 2提问于2017-04-30得票数 0
从Webpack 4迁移到Webpack 5时，我在使用空值的devtool时遇到错误(仅在生产模式下)。
module.exports = {
devtool: isProd ? '' : 'source-map',
// entry: ...
// output: ...
// module: ...
}
控制台中的消息：
ValidationError: Invalid configuration object. Webpack has been initialized using a configuration objec
浏览 5提问于2020-06-26得票数 19
回答已采纳
我使用的是一个自定义的webpack配置文件，它是： var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: {
app: './src/index.js'
},
output: {
filename: 'dist/bundle.js',
sourceMapFilename: 'dist/bundle.map'
},
浏览 12提问于2021-04-04得票数 0
回答已采纳
我正在尝试在这个之后使用教科书react应用程序。但是，当我运行命令sh -c webpack --watch -d --output ./target/classes/static/built/bundle.js (如本教程中提到的npm run-script watch)时，我将得到以下错误。
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configura
浏览 6提问于2021-04-01得票数 1
回答已采纳
这是我的webpack.config.js
var webpack = require("webpack");
module.exports = {
entry: "./entry.js",
devtool: "source-map",
output: {
path: "./dist",
filename: "bundle.min.js"
},
plugins: [
new webpack.optimize.UglifyJsPlugin({minimize: true
浏览 21提问于2014-09-21得票数 262
回答已采纳
我正在和webpack建立反应，这是webpack配置文件\n
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, "src", "index.js"),
devtool: 'sourcemaps',
cache: true,
mode: 'developme
浏览 5提问于2022-03-28得票数 0
如果我错了，请纠正我，但据我所知，
如果--env 导出函数，则只使用，以便能够在webpack.config.js中访问它。
module.exports = function(env, options) {
console.log(env); // "production"
}
假设我的入口点index.js具有以下代码：
console.log(process.env.NODE_ENV); // undefined ???
我想知道
process.env.NODE_ENV不会被赋值给任何值，不管我传递--env.production还是--env.developme
浏览 0提问于2019-03-20得票数 18
回答已采纳
我试图在angular1.5项目中添加。我在后面添加了第一个组件的路径，这不是从index.js开始的，它只是just组件。当我试图运行我的构建时，我会出错。
警告在配置‘模式’选项尚未设置，webpack将倒退到‘生产’的这一价值。设定‘模式’
选择“开发”或“生产”，以便为每个环境启用默认设置。您还可以将其设置为“无”以禁用任何默认行为。了解更多信息：
未找到输入模块中的错误:错误:无法解析'./src‘
我的代码看起来像
const path = require('path');
const config = require('./ENVIRONM
浏览 1提问于2019-07-05得票数 0
有没有可能将webpack与React和Typescript一起使用，并且能够将它们捆绑到一个web包中，但仍然能够调试原始TypeScript和React代码？在webpack中，我使用的是ts-loader和ts-jsx-loader + devtool："source-map"，但当我尝试进行浏览器调试时，我看不到原始的ts代码，而是看到了被webpack更改的代码。
我当前的基本webpack.config.js文件：
var webpack = require('webpack');
module.exports = {
entry: ['
浏览 0提问于2015-07-14得票数 11
webpack -p cli命令无法对es2015代码进行丑化。
package.json
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.13.2",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.13.2"
}
webpack.config.js
var webpack = requ
浏览 0提问于2016-08-10得票数 6
4回答
我正在尝试使用webpack-4来获得react的产品构建(该项目不是创建usinf Create React应用程序)，但并不成功。我的项目是使用类型记录和ts加载程序，并使用Reacti15.6.2的版本。
当前webpack配置文件
const path = require("path");
module.exports = {
entry: ['./lib/tproj/js/index.ts'],
output: {
filename: './dist/tproj/js/bundle.js'
},
浏览 2提问于2020-01-08得票数 1
回答已采纳
我正在和webpack一起使用babel，我试图使箭头功能与it一起工作，但是我无法让它工作。
这是我的package.json开发依赖项：
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env":
浏览 0提问于2018-08-03得票数 10
我使用的是提取-文本- Webpack -plugin 2.0.0-rc.3和Webpack 2.2.1，并且在运行构建时会得到这个错误：
/node_modules/extract-text-webpack-plugin/index.js:259
var shouldExtract = !!(options.allChunks || chunk.isInitial());
^
TypeError: chunk.isInitial is not a function
这是我的webpack.co
浏览 0提问于2017-02-21得票数 5
在webpack 1.x中，我可以使用我的webpack配置中的eslint属性来启用自动修复我的线条错误，方法是：
...
module.exports = {
devtool: 'source-map',
entry: './src/app.js',
eslint: {
configFile: '.eslintrc',
fix: true
},
...
然而，在webpack 2.x中，到目前为止我还无法使用自动修复功能，因为我不知道在我的webpack配置中该在哪里设置它。在我的webpack confi
浏览 1提问于2016-12-08得票数 18
回答已采纳
我是管道到webpack，需要传递一个配置文件和devtool参数。我试了几个变体的双平行线，没有任何效果。
//This works
gulp.task('js', function() {
gulp.src(config.paths.mainJs)
.pipe(webpack(require('./webpack.config.dev.js')
//how do we sourcemap this?
//devtool: "source-map"
))
//Thi
浏览 3提问于2016-02-12得票数 1
回答已采纳
我正在阅读有关Webpack的教程:在这个中，有一节是关于配置webpack的生产和开发。
以下是开发配置：
// webpack.config.dev.js
module.exports = {
devtool: 'cheap-eval-source-map',
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server',
'./src/index'
],
以下是生产配置：
// we
浏览 4提问于2017-05-04得票数 0
回答已采纳
我在本地开发了一个应用程序。客户端和服务器运行在不同的端口上。这个应用程序在我的本地系统上运行良好。现在，我已经将代码推送到服务器上。当我尝试使用npm运行代码时，请运行build。
我得到一个错误，看起来像这样
我的urlMixin.js看起来像这样
let path = require('path');
let webpack = require('webpack');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolv
浏览 0提问于2018-05-05得票数 0
4回答
我一直在尝试配置webpack使用更少和自动重新固定，但自动修复似乎不起作用。我的css或更少的文件不是自动修复的。示例：display: flex留着display: flex
我已经把我的webpack配置放在下面：
var autoprefixer = require('autoprefixer');
module.exports = {
entry: {
bundle: "./index.jsx"
},
output: {
path: __dirname,
filename: "[name].js"
浏览 3提问于2016-06-24得票数 21
回答已采纳
无法从我的项目中的子目录运行webpack。这是我得到的错误:错误: EACCES，打开'/build/bundle.js‘
这是webpack的配置文件：
module.exports = {
entry: ['./app.ts'],
output: {
filename: 'bundle.js',
path: '/build'
},
resolve: {
extensions: ['', '.ts', '.js
浏览 0提问于2015-04-15得票数 9
我正在尝试使用webpack/react/redux等设置一个项目。我已经安装了该项目，但我在浏览器中看不到开发工具中的项目文件。我在网上搜索发现
debug : true,
devtool : 'source-map'
在我的webpack配置文件将使文件出现在开发工具，但他们仍然没有出现。我只能在开发工具中看到我的bundle.js。
我的整个webpack.config.js文件是：
var webpack = require('webpack');
module.exports = {
entry: [
'webpack-hot-m
浏览 0提问于2016-12-01得票数 0
回答已采纳
根据，我试图在生产/发行版构建中添加源地图支持。
然而，当我尝试使用以下npm脚本在生产模式下运行webpack时，我得到了一个例外：webpack --mode production -p --devtool source-map。它所做的就是：
将mode设置为production
-p参数是a：shortcut for --optimize-minimize --define process.env.NODE_ENV="production"
并将devtool设置为source-map
异常
Unhandled rejection Error: or
浏览 0提问于2019-07-01得票数 0
回答已采纳
3回答
当我npm启动我的webpack-dev-server时，我得到了这个错误：
ERROR in multi main
Module not found: Error: Cannot resolve 'file' or 'directory' /var/www/html/151208-DressingAphrodite/app in /var/www/html/151208-DressingAphrodite
@ multi main
这是我的webpack.config.js：
var path = require('path');
var w
浏览 1提问于2015-12-08得票数 14
1回答
我使用webpack来捆绑我的节点应用程序。
我看到了webpack将const转化为var的结果。这意味着webpack将我的文件转换为es5。
我怎么能让webpack转换成es6呢？(保留const原样和/或使用import关键字)
app.js
import {test} from './some';
const x = 1;
console.log('test', test);
console.log('this should be const in the bundle, not var. ', x);
和包是：
"use
浏览 1提问于2018-10-19得票数 0
回答已采纳
我在试着理解webpack是如何工作的。我正在开发一个Wordpress主题，我决定试一试Webpack。
我正在为Webpack的配置而努力。配置它来处理SASS相当简单，但是当涉及到添加对应该绑定到一个JS文件中的JS文件的支持时：scripts.js，那么理解它是如何工作的就变得太难了。
这是我的配置：
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
mo
浏览 1提问于2017-07-13得票数 0
我正在尝试用HtmlWebpackPlugin插件缩小我的html文件与Webpack。我设法将一个index.html文件放到了我的dist加载程序中，但是我在缩小它方面遇到了一些麻烦。
dist/
node_modules/
src/
ejs/
js/
css/
server.js
webpack.config.js
package.js
webpack.config.js :
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require(&#
浏览 1提问于2018-09-18得票数 8
回答已采纳
我试图设置webpack与巴贝尔编译反应文件。webpack配置是在VSCode中自动生成的，扩展了Webpack。我尝试在预设部分中添加“@babel/预设反应”，但是，它不起作用，出现了以下错误：
模块解析失败:意外令牌(11:16)您可能需要一个适当的加载程序来处理此文件类型。
看来webpack忽略了“@babel/预设反应”？配置如下。
const path = require('path');
module.exports = {
mode: 'development',
entry: path.join(__dirname,
浏览 1提问于2019-02-24得票数 1
回答已采纳
更新-相关：
我让webpack编写了一个简单的module.exports = "asdfasdf"到foo.js
在节点server.js中，我有var foo = require("./foo.js")
当我console.log(foo)时，我得到一个空对象{}
我做错什么了？？
我的webpack配置：
module.exports = {
entry: "./test.js",
output: {
filename: "./foo.js"
},
target: "
浏览 5提问于2016-07-10得票数 16
回答已采纳
1回答
我想升级到Webpack 2。
我已将devtool: "source-map"添加到webpack.config.js文件中。当我构建时，我会像我所期望的那样创建一个bundle.js.map文件。
但是当我打开Chrome页面时，我没有得到任何源地图信息：
如您所见，通常用于获取源地图信息的webpack://文件夹丢失了。
但是铬说“探测到了源地图”。(单击该按钮没有帮助。)显然它知道我有原始地图..。(按ctrl+p只显示捆绑的下载文件，而不是我的源文件。)我认为Chrome应该自动请求我的源地图文件并使用它，这是错误的吗？
然而，当我使用devtool: &
浏览 3提问于2017-03-31得票数 2
上下文
用webpack构建Webapp (框架是vuejs，从这里不相关的快速看)
当webapp处于dev模式时，不会引发错误。当webapp处于生产模式(已构建)时，将引发错误：Uncaught (in promise) TypeError: Assignment to constant variable
存储的action.js文件
import Axios from 'axios';
let isError404 = function(error){
return (
error.status === 404 ||
error
浏览 9提问于2022-09-07得票数 0
回答已采纳
使用webpack 4，我已经部署到生产中，其中一个页面在控制台中显示错误：
错误：$injector/unpr?p0=eProvider%20%3C-%20e
在角文档中显示
未知提供者: eProvider <- e
人们说这条消息是为了丑化你的脚本，并导致这条无用的错误消息。因此，我从webpack.prod.js中删除了Uglify配置，脚本继续被丑化，因此控制台仍然为我提供了这个无用的错误。
我将在下面发布我的webpack.common.js和webpack.prod.js，这样您就可以看一看，但是我90%肯定没有剩下的配置会使脚本变得丑陋？
问题
如何停止这
浏览 0提问于2018-05-17得票数 0
回答已采纳
我想webpack我的React.js应用程序使用丑陋版本
webpack.config.js
module.exports = {
entry: './_react/index',
output: {
path: './dist/public/app',
filename: 'bundle.min.js'
},
devtool: 'source-map',
devServer: {
contentBase: __dirname
},
浏览 3提问于2016-08-10得票数 0
回答已采纳
在这个webpack初学者工具包中，我看到webpack.production.config.js模块并不只导出一个配置对象，而是导出一组配置对象：
module.exports = [
require("./make-webpack-config")({
// commonsChunk: true,
longTermCaching: true,
separateStylesheet: true,
minimize: true
// devtool: "source-map"
浏览 90提问于2015-04-15得票数 33
回答已采纳
2回答
我正在用npm，webpack和babel用es6写我的图书馆，并转换+缩小。但是结果被转换为ecmaScript 5.1，它使用对象(Object.defineProperty)，但我的目标是不支持对象的ecmaScript 5，或者如果发现了其他限制，则会降低ecmaScript。(我需要的javascript版本是中使用的版本。)(我的目标是犀牛)
我的问题是，如何配置babel来做到这一点？我发现了填充，但我不知道如何使用它来实现我的目标。
巴伯尔
{ "presets": ["env"] }
webpack.config
module.ex
浏览 1提问于2018-02-15得票数 4
回答已采纳
我最近升级到了Webpack 2，现在浏览器中的所有console.logs都消失了，所有的redux-logger输出以及所有的JavaScript错误和警告都消失了。
我有两个配置--用于dev和test。它们实际上是一样的，但是dev有console.logs而test没有。我如何在测试中启用它们？
下面是包含console.logs的开发工具：
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
mod
浏览 10提问于2017-03-08得票数 3
使用webpack 5设置了一个简单的中间人应用，但是得到了这个无效的配置对象错误： [webpack-cli]
Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map
浏览 93提问于2020-10-13得票数 4
回答已采纳
在mode: production上运行webpack 4时，我得到了以下错误：
ERROR in style.ba47861224d5cf44f61f.js from UglifyJs Unexpected character '@' [./app/scss/main/app.scss:1,0][style.ba47861224d5cf44f61f.js:1,0]
下面是我的配置：
common.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpac
浏览 0提问于2018-05-04得票数 1
1回答
Webpack 2提供了新的解析设置，当我试图修改配置中的设置时，webpackValidator抛出一个错误
“模块”不允许“”
const config = webpackValidator({
context: resolve('src'),
entry: './app.js',
output: {
filename: 'bundle.js',
path: resolve('dist'),
publicPath: '/dist/'
浏览 1提问于2017-01-09得票数 1
1回答
我正在尝试webpack的建筑，并出现了有趣的问题。我只想为prod生成CSS源映射，当我使用devtool: "source-map",时，我会同时使用JS和CSS映射。我对这个“问题”做了一个快速的搜索，但什么也没有出现。有什么简单的方法来控制我生成的地图吗？
浏览 4提问于2022-01-23得票数 0
下面的图片描绘了我的角2项目目录结构。
子文件夹“作者”、“书籍”和“类别”都有与功能模块相关的文件。
我使用webpack 2模块捆绑，树抖动和AoT编译。
下面是webpack.config.js文件的内容
'use strict';
const webpack = require('webpack');
const AotPlugin = require('@ngtools/webpack').AotPlugin;
module.exports = {
devtool: 'source-map',
浏览 1提问于2017-02-20得票数 2
回答已采纳
1回答
我只想优化/修改供应商条目区块？我怎样才能改变下面的webpack配置来达到这个目的呢？
module.exports = {
entry: {
vendor: ['./src/vendor.ts'],
index: ['./src/index.ts'],
home: ['./src/home.ts']
},
...
devtool: "source-map",
plugins: [
new HtmlWebpackPlugin({
浏览 1提问于2016-10-14得票数 1
我正在使用webpack在一个.Net项目中捆绑我的javascript文件。最近我遇到了一个bug，我想使用chrome工具进行调试。
在webpack配置文件中，我添加了下面一行以生成源映射。
devtool: 'source-map'
运行npx webpack后，在我的dist文件夹中生成以下文件。
所以我确信这些文件是生成的。当我在chrome调试器中打开resources.entry.js时，我会看到以下内容。
然而，我似乎并没有找到源地图，所以我可以放置一个断点。我在树上找不到它。
我似乎不能像Chrome建议的那样做一个ctrl + p
浏览 13提问于2020-02-14得票数 10
回答已采纳
3回答
因此，我一直试图在webpack.config.js，中添加一个CSS加载程序，代码如下所示：
module.exports = {
entry: './scripts/entry.js',
output: {
filename: 'bundle.js'
},
devtool: 'source-map',
module: {
loaders: [
{
test : /\.css$/,
浏览 2提问于2016-04-05得票数 0
回答已采纳
我的项目有这样的结构：
\root
\webpack.config.js
\public
\ index.html
\ ...
\ css
\ directives
\ views
\ dist (webpack output)
\app.js
\ index.html
\ app.js.map
\ style.css
\ style.css.map
当我使用webpack-dev-server时，我从/root启动它，它会加载应用程
浏览 2提问于2017-05-14得票数 5
2回答
NPM构建问题
、、
尝试运行此命令: npm run build。这里是package.json文件“脚本”的脚本定义：{ "start"："npm run build"，"build"："webpack -d，--devtool && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ -d --hot"，"build:prod"："webpack -p && cp src&a
浏览 20提问于2021-03-28得票数 0
我使用下面的代码来配置webpack 5： const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
devtool: "source-map"
}; 这是我的index.js代码， const bar=require('./bar.js
浏览 27提问于2021-04-07得票数 1
回答已采纳
5回答
我把webpack 4更新到了webpack 5，之后一切正常，除了更新浏览器(实时重载)，谁能说出原因呢？这是我的配置。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const autoprefixer = require('autoprefixer');
module
浏览 3提问于2020-10-22得票数 5
我发布了一个ES6库，它被转到ES5，并使用这个webpack.config.js提供了源代码映射。
var webpack = require("webpack");
module.exports = {
entry: ['./src/MyLib.js'],
output: {
path: __dirname,
filename: 'dist/bundle.js',
libraryTarget: 'umd',
library: "MyLib"
},
module:
浏览 1提问于2015-12-13得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
