无效的配置对象.已使用配置对象初始化Webpack;devtool应该匹配模式

Question

我试图用es6语法实现webpack 5，但我做得不够，尽管我根据文档明确提供了devtool设置。

错误消息：[webpack-cli]配置对象无效。已使用与API架构不匹配的配置对象初始化Webpack。

• configuration.devtool应该匹配模式"^(内联-|hidden-|eval-(？(nosources-(？(便宜-(模块-(？(？源映射$"；。自webpack 5以来的BREAKING CHANGE：devtool选项更加严格。请严格遵循模式中关键字的顺序

import webpack from 'webpack';
import HtmlWebpackPlugin from "html-webpack-plugin"
import path from "path";
import { dirname } from 'path';
import { fileURLToPath } from 'url';
const __dirname = dirname(fileURLToPath(import.meta.url));
export default {
mode: 'development',
devtool: 'eval-cheap-source-map',
entry: "./client/index.js",
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: 'bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
template: "./client/index.html",
filename: "index.html"
}),
],
resolve: {
modules: [__dirname, "node_modules"],
extensions: [".js", ".jsx"],
},
module: {
rules: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader",
},
],
},
devServer: {
host: 'localhost',
port: 3001,
static: {
directory: path.resolve(__dirname, 'dist'),
publicPath: '/',
},
hot: true,
proxy: {
'/NHLdata/**': {
target: 'http://localhost:3002/',
secure: false,
}
}
},
};

来自package.json:的适用依赖项

"devDependencies": {
"babel-loader": "^8.2.5",
"html-webpack-plugin": "^5.5.0",
"source-map-loader": "^4.0.0",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
}

Answer 1

我试着运行你的webpack文件，唯一遇到问题的是这一行：

const __dirname = dirname(fileURLToPath(import.meta.url));

尝试删除它。我在我的webpack文件中使用了__dirname，但没有。

此外。实际上，我是用打字稿写我的webpack文件的。如果你有babel，它是有效的。

所以你可以一直尝试。您只需要从npm安装类型即可。

https://webpack.js.org/configuration/configuration-languages/#typescript

npm install --save-dev typescript ts-node @types/node @types/webpack
# and, if using webpack-dev-server < v4.7.0
npm install --save-dev @types/webpack-dev-server

并将您的webpack文件重命名为webpack.config.ts