reactjs - “devtool:'source-map'”上的 Webpack 配置错误
问题描述
我正在按照本教程尝试教科书反应应用程序。但是,当我运行命令时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.
- configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".
BREAKING CHANGE since webpack 5: The devtool option is more strict.
Please strictly follow the order of the keywords in the pattern.
我的 webpack.config.js 如下。
let path = require('path');
module.exports = {
entry: './src/main/js/App.js',
devtool: 'source-map',
cache: true,
mode: 'development',
output: {
path: __dirname,
filename: './src/main/resources/static/built/bundle.js'
},
module: {
rules: [
{
test: path.join(__dirname, '.'),
exclude: /(node_modules)/,
use: [{
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env", "@babel/preset-react"]
}
}]
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif|eot|otf|ttf|woff|woff2)$/,
use: [
{
loader: 'url-loader',
options: {}
}
]
}
]
}
};
知道问题出在哪里吗?
我正在使用 Webpack 5.29.0。
解决方案
webpack --watch -d --output ./target/classes/static/built/bundle.js
这里-d表示 devtool 选项,它会覆盖文件中给出的选项。在 webpack 5 中,你不能将 empty 传递给 devtool。
这就是问题所在。
推荐阅读
- sql-server - MS SQL Server 存储过程不会完成
- sql - 从postgresql中的相关表中获取数据
- visual-studio-code - VSCode 无法从不同目录导入 python 模块
- php - 如何检测 mime 中的电子邮件主题是否在 PHP 上解码?
- python - 部署到 EC2 setuptools_rust 时出现 Python 管道错误
- swift - 滑动 NSSlider 阻止键的 NSEvent 监视,反之亦然,如何捕捉它们一致
- tensorflow - 从目录重新加载 Keras-Tuner Trials
- math - 在 PARI GP 中传递用户定义函数之外的值
- c - 有没有办法从返回的 char* 中安全地收集数据?
- python - 如何从python列表中的dict中提取值