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

【问题标题】：Webpack error: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schemaWebpack 错误：配置对象无效。 Webpack 已使用与 API 模式不匹配的配置对象进行初始化
【发布时间】：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);

【问题讨论】：

标签： node.js reactjs webpack

【解决方案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

【讨论】：