文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >为了获取bundle.js文件而尝试运行webpack时遇到了问题

问为了获取bundle.js文件而尝试运行webpack时遇到了问题
EN

Stack Overflow用户
提问于 2019-02-20 06:30:51
回答 1查看 684关注 0票数 0

终端：

代码语言：javascript
复制
Version: webpack 4.28.3
Time: 940ms
Built at: 02/19/2019 10:11:22 PM
 1 asset
Entrypoint app = bundle.js
[0] ./client/src/index.js 4.6 KiB {0} [built] [failed] [1 error]

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/src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: I:\React apps\reactexpress\client\src\index.js: Unexpected token (8:16)

   6 | import * as serviceWorker from "./serviceWorker";
   7 | 
>  8 | ReactDOM.render(<App />, document.getElementById("root"));
     |                 ^
   9 | 
  10 | // If you want your app to work offline and load faster, you can change
  11 | // unregister() to register() below. Note this comes with some pitfalls.
    at Parser.raise (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:3831:17)
    at Parser.unexpected (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5143:16)
    at Parser.parseExprAtom (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:6283:20)
    at Parser.parseExprSubscripts (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5862:23)
    at Parser.parseMaybeUnary (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5842:21)
    at Parser.parseExprOps (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5729:23)
    at Parser.parseMaybeConditional (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5702:23)
    at Parser.parseMaybeAssign (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5647:21)
    at Parser.parseExprListItem (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:6940:18)
    at Parser.parseCallExpressionArguments (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:6070:22)
    at Parser.parseSubscript (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5965:29)
    at Parser.parseSubscripts (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5882:19)
    at Parser.parseExprSubscripts (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5872:17)
    at Parser.parseMaybeUnary (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5842:21)
    at Parser.parseExprOps (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5729:23)
    at Parser.parseMaybeConditional (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5702:23)
    at Parser.parseMaybeAssign (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5647:21)
    at Parser.parseExpression (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5595:23)
    at Parser.parseStatementContent (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:7378:23)
    at Parser.parseStatement (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:7243:17)
    at Parser.parseBlockOrModuleBlockBody (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:7810:25)
    at Parser.parseBlockBody (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:7797:10)
    at Parser.parseTopLevel (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:7181:10)
    at Parser.parse (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:8658:17)
    at parse (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:10658:38)
    at parser (I:\React apps\reactexpress\node_modules\@babel\core\lib\transformation\normalize-file.js:170:34)
    at normalizeFile (I:\React apps\reactexpress\node_modules\@babel\core\lib\transformation\normalize-file.js:138:11)
    at runSync (I:\React apps\reactexpress\node_modules\@babel\core\lib\transformation\index.js:44:43)
    at runAsync (I:\React apps\reactexpress\node_modules\@babel\core\lib\transformation\index.js:35:14)
    at process.nextTick (I:\React apps\reactexpress\node_modules\@babel\core\lib\transform.js:34:34)
    at process._tickCallback (internal/process/next_tick.js:61:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! reactexpress@1.0.0 webpack: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the reactexpress@1.0.0 webpack script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Jesal\AppData\Roaming\npm-cache\_logs\2019-02-19T22_11_22_659Z-debug.log

调试日志：

代码语言：javascript
复制
0 info it worked if it ends with ok
1 verbose cli [ 'H:\\Node\\node.exe',
1 verbose cli   'C:\\Users\\Jesal\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'webpack' ]
2 info using npm@6.8.0
3 info using node@v10.15.1
4 verbose run-script [ 'prewebpack', 'webpack', 'postwebpack' ]
5 info lifecycle reactexpress@1.0.0~prewebpack: reactexpress@1.0.0
6 info lifecycle reactexpress@1.0.0~webpack: reactexpress@1.0.0
7 verbose lifecycle reactexpress@1.0.0~webpack: unsafe-perm in lifecycle true
8 verbose lifecycle reactexpress@1.0.0~webpack: PATH: C:\Users\Jesal\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;I:\React apps\reactexpress\node_modules\.bin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\NVIDIA Corporation\NVIDIA NvDLISR;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;H:\Node\;C:\Program Files\Git\cmd;C:\Users\Jesal\AppData\Local\Microsoft\WindowsApps;C:\Users\Jesal\AppData\Roaming\npm;C:\Users\Jesal\AppData\Local\Programs\Microsoft VS Code\bin
9 verbose lifecycle reactexpress@1.0.0~webpack: CWD: I:\React apps\reactexpress
10 silly lifecycle reactexpress@1.0.0~webpack: Args: [ '/d /s /c', 'webpack' ]
11 silly lifecycle reactexpress@1.0.0~webpack: Returned: code: 2  signal: null
12 info lifecycle reactexpress@1.0.0~webpack: Failed to exec webpack script
13 verbose stack Error: reactexpress@1.0.0 webpack: `webpack`
13 verbose stack Exit status 2
13 verbose stack     at EventEmitter.<anonymous> (C:\Users\Jesal\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
13 verbose stack     at EventEmitter.emit (events.js:189:13)
13 verbose stack     at ChildProcess.<anonymous> (C:\Users\Jesal\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:189:13)
13 verbose stack     at maybeClose (internal/child_process.js:970:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid reactexpress@1.0.0
15 verbose cwd I:\React apps\reactexpress
16 verbose Windows_NT 10.0.17134
17 verbose argv "H:\\Node\\node.exe" "C:\\Users\\Jesal\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "webpack"
18 verbose node v10.15.1
19 verbose npm  v6.8.0
20 error code ELIFECYCLE
21 error errno 2
22 error reactexpress@1.0.0 webpack: `webpack`
22 error Exit status 2
23 error Failed at the reactexpress@1.0.0 webpack script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]

注意:我有一个包含以下内容的.babelrc文件：

代码语言：javascript
复制
{
  "presets": ["es2015", "react"]
}

我的webpack.config.js如下：

代码语言：javascript
复制
const path = require("path");

module.exports = {
  entry: {
    app: "./client/src/index.js"
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },

  module: {
    rules: [
      {
        test: /\.js$/, // include .js files
        exclude: /node_modules/, // exclude any and all files in the node_modules folder
        loader: "babel-loader"
      },

      {
        test: /\.jsx$/, // include .js files
        exclude: /node_modules/, // exclude any and all files in the node_modules folder
        loader: "babel-loader"
      }
    ]
  }
};

我已经尝试了可能的方法，比如这篇文章中建议的方法：

npm ERR! code ELIFECYCLE

尽管错误和我所说的不同，这是专门针对webpack的。我在网上搜索过任何与我遇到的问题相似的东西，但都无济于事。任何帮助都将不胜感激。提前谢谢。

编辑：

package.json (根文件夹级别1-有关后端模块的所有内容都在此文件中)如下：

代码语言：javascript
复制
{
  "name": "reactexpress",
  "version": "1.0.0",
  "description": "Boilerplate for React and Express",
  "main": "server.js",
  "scripts": {
    "client-install": "cd client && npm install",
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "webpack": "node_modules/.bin/webpack"
  },
  "author": "Jesal Patel",
  "license": "ISC",
  "dependencies": {
    "concurrently": "^4.1.0",
    "express": "^4.16.4",
    "react-dom": "^16.8.2"
  },
  "devDependencies": {
    "@babel/core": "^7.3.3",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel": "^6.23.0",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "nodemon": "^1.18.10",
    "webpack": "^4.28.3",
    "webpack-cli": "^3.2.3"
  }
}

base folder structure

上图显示了我的文件夹结构。现在所有后端的东西都在根目录下，它是'reactexpress‘，并且在client文件夹中有一个独立的package.json文件，这个文件夹也包含src文件夹，这个文件夹包含了我所有的组件，比如App.js和index.js文件。不确定这是否与问题相关，但我想无论如何我都会在这里发布它。

reactjs
webpack
babeljs
webpack.config.js
EN

回答 1

Stack Overflow用户

发布于 2019-02-20 06:34:24

由于您使用的是@ babel，所以我假设您使用的是babel 7。您需要使用@babel/preset-react并通过npm安装它，而不是在.babelrc文件中使用"react“

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/54775932

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档