Question

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

CLI移动到一个单独的包中：webpack-cli。请安装   ＆＃39;的WebPack-CLI＆＃39;除了webpack本身使用CLI。

- ＆GT;使用npm时：npm install webpack-cli -D

- ＆GT;使用纱线时：纱线添加webpack-cli -D   module.js：471       扔错了;       ^

然后在得到上述错误并安装CLI后，我开始收到以下错误。它说有一个未知的物业装载机，但我通过了装载机＆＃39;数组如：

module：{loaders：[[Object]，[Object]，[Object]，[Object]，   [对象]，[对象]]}}

无效的配置对象。 Webpack已使用a初始化   与API架构不匹配的配置对象。     - configuration.module具有未知属性＆＃39;加载器＆＃39;。这些属性是有效的：object {exprContextCritical？，   exprContextRecursive？，exprContextRegExp？，exprContextRequest？，   noParse？，rules？，defaultRules？，unknownContextCritical？，   unknownContextRecursive？，unknownContextRegExp？，   unknownContextRequest？，unsafeCache ?, wrappedContextCritical？，   wrappedContextRecursive？，wrappedContextRegExp？，   strictExportPresence？，strictThisContextOnImports？ } - ＆gt;选项   影响正常模块（state char(4) primary key (PK) codetype char(2) (PK) code char(6) (PK) codetitle varchar(115)）。

- package.json

NormalModuleFactory

webpack shared config

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

- webpack dev config

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'
    },
    ]
  }
};

Answer 1

在您的网络包共享配置中，您应该将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')
    },
  ....

Answer 2

Webpack 4的配置和插件系统已从3更改。

最好在现有项目上坚持weback@^3一段时间，同时等待更新插件并解决错误。例如script-ext-html-webpack-plugin。

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

2 个答案: