1

我尝试通过示例来学习使用 MERN 堆栈的简单项目。但我不知道为什么 webpack 不起作用并在终端中抛出这样的错误。

我正在使用 Ubuntu v16.04。

npm 运行开发

mern-stack@1.0.0 dev /home/trungh13/Dev/mern-stack

webpack -wd 无效的配置对象。Webpack 已使用与 API 模式不匹配的配置对象进行初始化。- configuration.module 有一个未知的属性 'loaders'。这些属性是有效的：object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, WrappedContextCritical?, WrappedContextRecursive?, WrappedContextRegExp ?, strictExportPresence?, strictThisContextOnImports? } -> 影响正常模块的选项 ( NormalModuleFactory)。npm 错误！代码 ELIFECYCLE npm 错误！errno 1 npm 错误！mern-stack@1.0.0 开发人员：webpack -wd npm 错误！退出状态 1 npm ERR！npm 错误！在 mern-stack@1.0.0 开发脚本中失败。npm 错误！这可能不是 npm 的问题。上面可能有额外的日志输出。

这是我的 package.json 文件：

  {
    "name": "mern-stack",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "start": "nodemon --exec babel-node ./server/server.js --ignore public/",
      "dev": "webpack -wd"
    },
    "author": "trungh13",
    "license": "ISC",
    "dependencies": {
      "ejs": "^2.5.7",
      "express": "^4.16.3",
      "mongodb": "^3.0.5",
      "react": "^16.2.0",
      "react-dom": "^16.2.0"
    },
    "devDependencies": {
      "babel-cli": "^6.26.0",
      "babel-eslint": "^8.2.2",
      "babel-loader": "^7.1.4",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-react": "^6.24.1",
      "babel-preset-stage-2": "^6.24.1",
      "eslint": "^4.19.1",
      "eslint-plugin-react": "^7.7.0",
      "nodemon": "^1.17.2",
      "webpack": "^4.2.0"

    }
  }

这是我的 webpack.config.js：

module.exports={
    entry: './src/index.js',
    output: {
        path: __dirname + '/public',
        filename:'bundle.js'
    },
    module:{
        loaders:[
            {
                test:/\.js$/,
                loader:'babel-loader'
            }
        ]    
    }
};

非常感谢。

4

1 回答 1

1

问题出在module对象内部。该loaders属性无效，您应该改用该rules属性。此外，在中，您需要提供mode属性（可能的值为development,production和none）。

另一件要提的是，你需要webpack-cli在你的包中包含这个包，devDependencies因为在最新版本的 webpack 中，CLI 工具被移到了这个包中：webpack-cli

使用Webpack 4配置对象检查这个webpack-demo项目（用于开发和生产环境）。我认为之前的教程项目可能会有所帮助。

于 2018-03-25T00:31:23.643 回答