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中提到的旧版本是否会导致它。这是我学习反应和使用节点堆栈的最初几天。如果有人可以伸出援助之手来解决这个问题，那就太好了。

Answer 1

您使用的是非常旧版本的webpack（1.12.13）...我们已经在4xx版本范围内了。一开始可能很难将这一切都设置好。我犯了同样的错误，我自己可以把它全部搞定，最后我花了几个星期的时间抓住我的脑袋而根本不写任何代码。

这并没有真正回答你的问题，但...... 我真的建议使用一些东西来帮助你快速运行，比如create-react-app。无论如何，如果你仍然好奇整个捆绑和转换的东西是如何工作的那么你可以稍后再研究一下。但就目前而言，这整件事可能只会扼杀你的动力。保持！最终一切都会聚集在一起。

<强>更新

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

Answer 2

我建议使用create-react-app，您不需要使用构建工具。特别是因为您正在学习React，而不是随之而来的各种构建工具。

npx create-react-app my-app
cd my-app
npm start

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

如果您不想这样做，请更新Babel，Webpack和React。

使用webpack构建错误

2 个答案: