代码之家 › 专栏 › 技术社区 › CoderKK

Web包生成错误

babeljs webpack reactjs javascript

CoderKK · 技术社区 · 7 年前

我运行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

这是我的包裹。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"
  }
}

这是我的网页。配置,

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上的一个旧教程,我想知道包中是否提到了旧版本。json导致了它。这是我学习react和使用节点堆栈的最初几天。如果有人能帮我解决这个问题,那就太好了。

2 回复 | 直到 7 年前

Martin Reiche 7 年前

您正在使用非常旧版本的webpack(1.12.13)。。。我们已经在4xx版本范围内。要在一开始就把这一切都安排好真的很难。我也犯了同样的错误,认为我可以自己设置,最后我花了几个星期挠头,根本没有写任何代码。

这并不能真正回答你的问题,但是。。。我真的建议你使用一些东西来快速启动和运行,比如创建react应用程序。如果你还想知道整个捆绑和传输的工作原理,那么你可以稍后再研究。但现在,这一切可能会扼杀你的动力。坚持下去!最终一切都会好起来的。

使现代化

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

Paul McLoughlin 7 年前

我只建议使用 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。