webpack v5 devtool 应该匹配模式

Question

使用 webpack 5 设置一个简单的 Middleman 应用程序，但收到此无效配置对象错误：

[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 的

None 似乎给出了除上述错误之外的任何其他错误，也没有遗漏 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

Answer 1

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

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

webpack v5 devtool 应该匹配模式

webpack v5 devtool should match pattern

webpack

webpack-5