4

使用 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$".
   BREAKING CHANGE since webpack 5: The devtool option is more strict.
   Please strictly follow the order of the keywords in the pattern.

此处列出的devtool 选项似乎都没有给出除上述错误之外的任何其他错误，也没有遗漏 devtool 或明确将其设为 false。

这是我使用 webpack 4 的设置，但如果能深入了解什么可以解除无效配置错误，我将不胜感激。

我的 package.json

{
  "name": "webpack5_practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^4.3.0",
    "mini-css-extract-plugin": "^1.0.0",
    "node-sass": "^4.14.1",
    "sass-loader": "^10.0.3",
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0"
  }
}

我的 webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  devtool: 'inline-source-map',
  mode: 'development',
  entry: {
    site: ['./source/javascripts/site.js'],
    style: ['./source/stylesheets/site.css.scss'],
  },
  output: {
    path: path.resolve(__dirname, '.tmp/dist'),
    filename: '[name].min.js',
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      }
    ]
  },
  plugins: [new MiniCssExtractPlugin()],
};

我的 config.rb 与 webpack 相关

# Webpack
activate :external_pipeline,
  name: :webpack,
  command: build? ? './node_modules/webpack/bin/webpack.js --bail' : './node_modules/webpack/bin/webpack.js --watch -d',
  source: "./dist",
  latency: 1
4

1 回答 1

11

回答我自己的问题并编辑原件以包含我的错误：

我正在使用 config.rb 中的标志通过 Middleman 外部管道运行 Webpack -d。删除标志（或明确列出 devtool 选项）将修复错误。

于 2020-10-14T15:49:32.947 回答