Webpack 错误：配置对象无效。 Webpack 已使用与 API 模式不匹配的配置对象进行初始化

Posted 2023-02-22

【中文标题】Webpack 错误：配置对象无效。 Webpack 已使用与 API 模式不匹配的配置对象进行初始化

【英文标题】：Webpack error: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema

【发布时间】：2018-08-16 01:53:31

【问题描述】：

我已经升级了我的网络应用程序包，这次升级似乎破坏了我的构建。我第一次收到一个错误，告诉我安装 webpack CLI，

CLI 移到了一个单独的包中：webpack-cli。请安装 'webpack-cli' 除了 webpack 本身来使用 CLI。

-> 使用 npm 时：npm install webpack-cli -D

-> 使用yarn时：yarn add webpack-cli -D 模块.js:471 抛出错误； ^

然后在收到上述错误并安装 CLI 后，我开始收到以下错误。它说有一个未知的属性加载器，但我正在传递“加载器”数组：

模块：加载器：[[对象]，[对象]，[对象]，[对象]， [对象]，[对象]]

无效的配置对象。 Webpack 已使用 与 API 架构不匹配的配置对象。 - configuration.module 有一个未知的属性 'loaders'。这些属性是有效的：object exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?，unknownContextRegExp?， unknownContextRequest?、unsafeCache?、wrappedContextCritical?、 WrappedContextRecursive?, WrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? -> 选项 影响正常模块（NormalModuleFactory）。

-- 包.json

"url-loader": "^1.0.1",
"webpack": "^4.1.0",
"webpack-cli": "^2.0.10",
"webpack-dev-server": "^3.1.0"

webpack 共享配置

module.exports = 
  entry: './src/main.js',
  resolve: 
    extensions: ['*', '.js', '.jsx']
  ,
  module: 
    loaders: [
      test: /\.jsx$|\.js$/,
      loaders: ['babel-loader'],
      include: path.resolve(__dirname, '../src')
    ,
    
      test: /\.css$/,
      loader: 'style-loader!css',
    , 
      test: /\.woff2?$/,
      loader: 'url-loader?limit=10000&mimetype=application/font-woff',
      include: path.resolve(__dirname, '../assets')
    ,
    
      test: /\.(eot|jpeg|jpg|png|svg|ttf|webp)$/,
      loader: 'file-loader',
      include: path.resolve(__dirname, '../assets')
    ,
    
        test: /\.scss$/,
        loader: 'style!css!sass?outputStyle=expanded',
    ,
    
        test: /\.(png|jpg|svg)$/, loader: 'url-loader?limit=8192'
    ,
    ]
  
;

-- webpack 开发配置

const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('Script-Ext-Html-Webpack-Plugin');
const pkg = require('../package.json');
const shared = require('./shared.js');

const bundleName = `$pkg.name-$pkg.version.js`;
const indexHtmlPath = path.resolve(__dirname, '../static/index.html');
const port = process.env.PORT || 3000;

 // console.log(path.resolve(__dirname, 'dist', `$bundleName`));
console.log('shared::: ',shared)
module.exports = 
  devtool: 'sourcemap',
    entry: [
        `webpack-dev-server/client?http://0.0.0.0:$port`,
        'webpack/hot/only-dev-server',
        shared.entry
    ],
    output: 
        path: path.resolve(__dirname, '../'),
        filename: `$bundleName`
    ,
  module: shared.module,
  resolve: shared.resolve,
  devServer: 
    port: port,
    inline: true,
    contentBase: path.resolve(__dirname, '../static'),
    historyApiFallback: true
  ,
  plugins: [
    new HtmlWebpackPlugin(
      inject: true,
      template: indexHtmlPath
    ),
    new ScriptExtHtmlWebpackPlugin(
      defaultAttribute: 'async'
    ),
    new webpack.HotModuleReplacementPlugin()
  ]
;

console.log(module.exports.output);

【参考方案1】：

在您的 webpack 共享配置中，您应该将 module.loaders 重命名为 module.rules。

module.exports = 
  entry: './src/main.js',
  resolve: 
    extensions: ['*', '.js', '.jsx']
  ,
  module: 
    loaders: [
      test: /\.jsx$|\.js$/,
      loaders: ['babel-loader'],
      include: path.resolve(__dirname, '../src')
    ,module.exports = 
  entry: './src/main.js',
  resolve: 
    extensions: ['*', '.js', '.jsx']
  ,
  module: 
    rules: [ // <---------------- change to rules here
      test: /\.jsx$|\.js$/,
      loaders: ['babel-loader'],
      include: path.resolve(__dirname, '../src')
    ,
  ....

【参考方案2】：

Webpack 4 的配置和插件系统已经从 3 改变了。

在等待更新插件和解决错误的同时，在现有项目上坚持使用weback@^3 可能会更好。例如script-ext-html-webpack-plugin。

【讨论】：

您说得很好，我必须更新一两个插件才能使其正常工作，但现在可以正常工作了。

【参考方案3】：

根据https://storybook.js.org/docs/angular/workflows/publish-storybook 使用 Storybook v6.3.8 和已经选择加入的 webpack 5 运行 yarn build-storybook 时遇到了同样的问题。构建命令仍然使用 webpack 4。

放这个

module.exports = 
  core: 
    builder: 'webpack5',
  ,
;

在根main.js 解决了这个问题。

来源：https://www.npmjs.com/package/@storybook/builder-webpack5