node.js - Webpack 错误 : Invalid configuration object. Webpack 已使用与 API 模式不匹配的配置对象初始化

Question

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

The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webpack itself to use the CLI.

-> When using npm: npm install webpack-cli -D

-> When using yarn: yarn add webpack-cli -D module.js:471 throw err; ^

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

module: { loaders: [ [Object], [Object], [Object], [Object], [Object], [Object] ] } }

invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.module has an unknown property 'loaders'. These properties are valid: object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? } -> Options affecting the normal modules (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);

Answer 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')
    },
  ....