javascript - webpack 构建错误

Question

我运行 webpack 时遇到错误，但我似乎找不到原因。

    Entrypoint main = bundle.js
   [0] ./client/client.js 224 bytes {0} [built] [failed] [1 error]
   [1] multi ./client/client.js 28 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in ./client/client.js
Module build failed: TypeError: Cannot read property 'babel' of undefined
    at Object.module.exports (/Users/XXX/Desktop/react-training/react-todo-list/node_modules/babel-loader/lib/index.js:103:36)
 @ multi ./client/client.js

这是我的 package.json，

{
  "name": "react-todo-list",
  "version": "1.0.0",
  "description": "A simple todo list app built with React, Redux and Webpack",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "nodemon server/server.js"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/kweiberth/react-todo-list.git"
  },
  "author": "XXXX",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.2",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "express": "^4.13.4",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "webpack": "^1.12.13"
  }
}

这是我的 webpack.config，

module.exports = {
    entry: ['./client/client.js'],
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js',
        publicPath: '/', 
    },
    module:{
        rules:[
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['react', 'es2015']
                }
            }
        ]
    }

}

我尝试安装不同版本的 babel 和 webpack，但没有成功。我正在关注 youtube 上的旧教程，我想知道 package.json 中提到的旧版本是否会导致它。这是我学习 React 和使用节点堆栈的最初几天。如果有人能帮我解决这个问题，那就太好了。

Answer 1

您正在使用非常旧版本的 webpack (1.12.13) ...我们已经在版本 4xx 范围内。一开始就很难把这一切都设置好。我犯了同样的错误，我认为我可以自己设置这一切，最后我花了几周的时间摸不着头脑，根本没有编写任何代码。

这并不能真正回答你的问题，但是......我真的建议使用一些东西来让你快速启动和运行，比如 create-react-app。如果您仍然好奇整个捆绑和转译的工作原理，那么您可以稍后再研究。但现在，这一切可能只会扼杀你的动力。继续努力吧!最终一切都会走到一起。

更新

好吧，如果你真的想进入基岩。您应该做的第一件事是更新您的软件包。特别是Webpack。当你想使用 webpack v4 时，你还需要 webpack-cli。此外，我建议阅读 webpack 入门部分。有很多关于如何设置 webpack 配置的好例子。 Link to Webpack Docs