Question

我正在关注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_modules（rm -rf node_modules）。我也尝试过npm cache clean --force。我似乎无法解决这个问题。我没有看到mode或项目中其他任何地方引用的webpack.config.js属性。

Answer 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可能会做什么吗？

Answer 2

css

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

Answer 3

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

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

3 个答案: