已使用与API模式不匹配的配置对象初始化Webpack。 -配置[0]具有未知的属性“模式”

时间:2019-05-13 16:40:30

标签: webpack material-design

我正在关注Material Design Components Basics的教程,并且遇到了Web Pack的问题。我犯了运行npm audit fix的错误,甚至犯了一个更大的错误,就是不注意这样做。

当我尝试运行npm start时,出现此错误:

「wds」: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration[0] has an unknown property 'mode'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, extern

这是我的webpack.config.js文件的样子:

function getStyleUse(bundleFilename) {
  return [
    {
      loader: 'file-loader',
      options: {
        name: bundleFilename,
      },
    },
    { loader: 'extract-loader' },
    { loader: 'css-loader' },
    {
      loader: 'sass-loader',
      options: {
        includePaths: ['./node_modules'],
        implementation: require('dart-sass'),
        fiber: require('fibers'),
  }
    },
  ];
}

module.exports = [
  {
    entry: './login.scss',
    output: {
      // This is necessary for webpack to compile, but we never reference this js file.
      filename: 'style-bundle-login.js',
    },
    module: {
      rules: [{
        test: /login.scss$/,
        use: getStyleUse('bundle-login.css')
      }]
    },
  },
  {
    entry: './home.scss',
    output: {
      // This is necessary for webpack to compile, but we never reference this js file.
      filename: 'style-bundle-home.js',
    },
    module: {
      rules: [{
        test: /home.scss$/,
        use: getStyleUse('bundle-home.css')
      }]
    },
  },
  {
    entry: "./login.js",
    output: {
      filename: "bundle-login.js"
    },
    module: {
      loaders: [{
        test: /login.js$/,
        loader: 'babel-loader',
        query: {presets: ['env']}
      }]
    },
  },
  {
    entry: "./home.js",
    output: {
      filename: "bundle-home.js"
    },
    module: {
      loaders: [{
        test: /home.js$/,
        loader: 'babel-loader',
        query: {presets: ['env']}
      }]
    },
  }
];

和我的package.json

{
  "name": "mdc-101-web",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "start": "webpack-dev-server --progress"
  },
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^7.0.0",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^2.1.1",
    "dart-sass": "^1.17.2",
    "extract-loader": "^1.0.2",
    "fibers": "^3.1.1",
    "file-loader": "^1.1.11",
    "sass-loader": "^7.1.0",
    "webpack": "^3.0.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  },
  "dependencies": {
    "@material/button": "^1.0.1",
    "@material/ripple": "^1.0.1",
    "@material/textfield": "^1.0.1"
  }
}

我尝试卸载webpack:npm uninstall -g webpack也尝试删除node_modulesrm -rf node_modules)。我也尝试过npm cache clean --force。我似乎无法解决这个问题。我没有看到mode或项目中其他任何地方引用的webpack.config.js属性。

3 个答案:

答案 0 :(得分:1)

在第2步中阅读有关Webpack的注释后:

  

有关其配置的详细信息,请参见Getting Started guide

我看到了这个笔记:

  

注意:我们建议使用webpack 3,因为我们仍在研究使用webpack4。我们还建议您使用webpack-dev-server 2,因为它可以与webpack 3一起使用。

运行此命令以安装Webpack 3后,它开始工作:

npm install --save-dev webpack@3 webpack-dev-server@2 css-loader sass-loader node-sass extract-loader file-loader

有人想评论npm audit fix可能会做什么吗?

答案 1 :(得分:1)

css

关于sassOptions中includePaths的更多信息是here

答案 2 :(得分:0)

将module.exports = []更改为module.exports = {}