webpack v5开发工具应匹配模式

Question

使用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 options listed here似乎都没有给出任何其他错误，也没有遗漏devtool或显式地使其为假。

这是我与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

Answer 1

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

我在config.rb中通过带有-d标志的中间人外部管道运行Webpack。删除该标志(或显式列出devtool选项)可以修复该错误。