实战

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

没有办法编译通过，把配置文件和报错文件都贴上来，望老师提供帮助

来源：2-4 Webpack loader基础应用

慕村1342571

2018-09-13

package.json:
{
“name”: “react-cnode-teach”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“build”: “webpack --config ./build/webpack.config.js --progess --display-modules --color --display-reasons --mode development”
},
“author”: “zhaoyuan”,
“license”: “ISC”,
“devDependencies”: {
"@babel/core": “^7.0.1”,
“babel-core”: “^6.26.3”,
“babel-loader”: “^8.0.2”,
“babel-preset-latest”: “^6.24.1”,
“html-webpack-plugin”: “^3.2.0”,
“react”: “^16.5.0”,
“react-dom”: “^16.5.0”,
“webpack”: “^4.18.1”,
“webpack-cli”: “^3.1.0”
}
}
const path = require(‘path’)
const htmlWebpackPlugin = require(‘html-webpack-plugin’)

module.exports = {
entry: {
app:path.join(__dirname, ‘…/client/app.js’)
},
output:{
filename: ‘[name].[hash].js’,
path: path.join(__dirname, ‘…/dist’),
publicPath:’/public’
},
module:{
rules:[{
test: /.js$/,
loader: ‘babel-loader’,
query: {
presets: [‘latest’] //按照最新的ES6语法规则去转换
}
}
]
},

plugins: [
    new htmlWebpackPlugin()
]

}

// /public/app.hash.js

D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach>npm run build

react-cnode-teach@1.0.0 build D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach
webpack --config ./build/webpack.config.js --progess --display-modules --color --display-reasons --mode development

[BABEL] Note: The code generator has deoptimised the styling of D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\react-dom\cjs\react-dom.development.js as it exceeds the max of 500KB.
Hash: 32f52129af4a55cebbfe
Version: webpack 4.18.1
Time: 11392ms
Built at: 2018-09-13 21:50:03
Asset Size Chunks Chunk Names
index.html 4.7 KiB [emitted]
app.32f52129af4a55cebbfe.js 664 KiB app [emitted] app
Entrypoint app = app.32f52129af4a55cebbfe.js
[./client/App.jsx] 232 bytes {app} [built] [failed] [1 error]
cjs require ./App.jsx [./client/app.js] 7:11-31
[./client/app.js] 337 bytes {app} [built]
single entry D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\client\app.js app
[./node_modules/object-assign/index.js] 2.17 KiB {app} [built]
cjs require object-assign [./node_modules/react-dom/cjs/react-dom.development.js] 8:800-824
cjs require object-assign [./node_modules/react/cjs/react.development.js] 17:18-42
[./node_modules/prop-types/checkPropTypes.js] 4.13 KiB {app} [built]
cjs require prop-types/checkPropTypes [./node_modules/react-dom/cjs/react-dom.development.js] 8:844-880
cjs require prop-types/checkPropTypes [./node_modules/react/cjs/react.development.js] 19:25-61
[./node_modules/prop-types/lib/ReactPropTypesSecret.js] 311 bytes {app} [built]
cjs require ./lib/ReactPropTypesSecret [./node_modules/prop-types/checkPropTypes.js] 14:29-66
[./node_modules/react-dom/cjs/react-dom.development.js] 550 KiB {app} [built]
cjs require ./cjs/react-dom.development.js [./node_modules/react-dom/index.js] 36:19-60
[./node_modules/react-dom/index.js] 1.32 KiB {app} [built]
cjs require react-dom [./client/app.js] 3:16-36
[./node_modules/react/cjs/react.development.js] 60.8 KiB {app} [built]
cjs require ./cjs/react.development.js [./node_modules/react/index.js] 6:19-56
[./node_modules/react/index.js] 189 bytes {app} [built]
cjs require react [./node_modules/react-dom/cjs/react-dom.development.js] 8:771-787
[./node_modules/schedule/cjs/schedule-tracking.development.js] 11.9 KiB {app} [built]
cjs require ./cjs/schedule-tracking.development.js [./node_modules/schedule/tracking.js] 6:19-68
[./node_modules/schedule/cjs/schedule.development.js] 17.6 KiB {app} [built]
cjs require ./cjs/schedule.development.js [./node_modules/schedule/index.js] 6:19-59
[./node_modules/schedule/index.js] 195 bytes {app} [built]
cjs require schedule [./node_modules/react-dom/cjs/react-dom.development.js] 8:894-913
[./node_modules/schedule/tracking.js] 213 bytes {app} [built]
cjs require schedule/tracking [./node_modules/react-dom/cjs/react-dom.development.js] 8:927-955

ERROR in ./client/App.jsx 6:12
Module parse failed: Unexpected token (6:12)
You may need an appropriate loader to handle this file type.
| render(){
| return(

        <div>This is app</div>

| )
| }
@ ./client/app.js 7:11-31

ERROR in Error: Child compilation failed:
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\html-webpack-plugin\default_index.ejs: Un expected token (1:0)

1 |
| ^
2 |
3 |
4 |

  • index.js:3938 Parser.raise
    [react-cnode-teach]/[@babel]/parser/lib/index.js:3938:15

  • index.js:5247 Parser.unexpected
    [react-cnode-teach]/[@babel]/parser/lib/index.js:5247:16

  • index.js:6327 Parser.parseExprAtom
    [react-cnode-teach]/[@babel]/parser/lib/index.js:6327:20

  • index.js:5923 Parser.parseExprSubscripts
    [react-cnode-teach]/[@babel]/parser/lib/index.js:5923:21

  • index.js:5902 Parser.parseMaybeUnary
    [react-cnode-teach]/[@babel]/parser/lib/index.js:5902:21

  • index.js:5811 Parser.parseExprOps
    [react-cnode-teach]/[@babel]/parser/lib/index.js:5811:21

  • index.js:5783 Parser.parseMaybeConditional
    [react-cnode-teach]/[@babel]/parser/lib/index.js:5783:21

  • index.js:5730 Parser.parseMaybeAssign
    [react-cnode-teach]/[@babel]/parser/lib/index.js:5730:21

  • index.js:5683 Parser.parseExpression
    [react-cnode-teach]/[@babel]/parser/lib/index.js:5683:21

  • index.js:7258 Parser.parseStatementContent
    [react-cnode-teach]/[@babel]/parser/lib/index.js:7258:21

  • index.js:7144 Parser.parseStatement
    [react-cnode-teach]/[@babel]/parser/lib/index.js:7144:17

  • index.js:7695 Parser.parseBlockOrModuleBlockBody
    [react-cnode-teach]/[@babel]/parser/lib/index.js:7695:23

  • index.js:7682 Parser.parseBlockBody
    [react-cnode-teach]/[@babel]/parser/lib/index.js:7682:10

  • index.js:7109 Parser.parseTopLevel
    [react-cnode-teach]/[@babel]/parser/lib/index.js:7109:10

  • index.js:8495 Parser.parse
    [react-cnode-teach]/[@babel]/parser/lib/index.js:8495:17

  • index.js:10448 parse
    [react-cnode-teach]/[@babel]/parser/lib/index.js:10448:38

  • normalize-file.js:170 parser
    [react-cnode-teach]/[@babel]/core/lib/transformation/normalize-file.js:170:34

  • normalize-file.js:138 normalizeFile
    [react-cnode-teach]/[@babel]/core/lib/transformation/normalize-file.js:138:11

  • index.js:44 runSync
    [react-cnode-teach]/[@babel]/core/lib/transformation/index.js:44:43

  • index.js:35 runAsync
    [react-cnode-teach]/[@babel]/core/lib/transformation/index.js:35:14

  • transform.js:34 process.nextTick
    [react-cnode-teach]/[@babel]/core/lib/transform.js:34:34

  • next_tick.js:131 _combinedTickCallback
    internal/process/next_tick.js:131:7

  • SyntaxError: D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\html-webpack-plugin\default_index.ejs:
    Unexpected token (1:0)

  • 1 | 

  • | ^

  • 2 |

  • 3 |

  • 4 |

  • compiler.js:79 childCompiler.runAsChild
    [react-cnode-teach]/[html-webpack-plugin]/lib/compiler.js:79:16

  • Compiler.js:296 compile
    [react-cnode-teach]/[webpack]/lib/Compiler.js:296:11

  • Compiler.js:553 hooks.afterCompile.callAsync.err
    [react-cnode-teach]/[webpack]/lib/Compiler.js:553:14

  • Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [react-cnode-teach]/[tapable]/lib/Hook.js:154:20

  • Compiler.js:550 compilation.seal.err
    [react-cnode-teach]/[webpack]/lib/Compiler.js:550:30

  • Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [react-cnode-teach]/[tapable]/lib/Hook.js:154:20

  • Compilation.js:1294 hooks.optimizeAssets.callAsync.err
    [react-cnode-teach]/[webpack]/lib/Compilation.js:1294:35

  • Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [react-cnode-teach]/[tapable]/lib/Hook.js:154:20

  • Compilation.js:1285 hooks.optimizeChunkAssets.callAsync.err
    [react-cnode-teach]/[webpack]/lib/Compilation.js:1285:32

  • Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [react-cnode-teach]/[tapable]/lib/Hook.js:154:20

  • Compilation.js:1280 hooks.additionalAssets.callAsync.err
    [react-cnode-teach]/[webpack]/lib/Compilation.js:1280:36

  • Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [react-cnode-teach]/[tapable]/lib/Hook.js:154:20

  • Compilation.js:1276 hooks.optimizeTree.callAsync.err
    [react-cnode-teach]/[webpack]/lib/Compilation.js:1276:32

  • Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [react-cnode-teach]/[tapable]/lib/Hook.js:154:20

  • Compilation.js:1213 Compilation.seal
    [react-cnode-teach]/[webpack]/lib/Compilation.js:1213:27

  • Compiler.js:547 hooks.make.callAsync.err
    [react-cnode-teach]/[webpack]/lib/Compiler.js:547:17

Child html-webpack-plugin for “index.html”:
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs] 4.07 KiB {0} [built] [failed] [1 error]
single entry D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\html-webpack-plugin\lib\loader.js!D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\html-webpack-plugin\default_index.ejs

ERROR in ./node_modules/html-webpack-plugin/default_index.ejs (./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs)
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\html-webpack-plugin\default_index.ejs:

Unexpected token (1:0)

> 1 | <!DOCTYPE html>
    | ^
  2 | <html>
  3 |   <head>
  4 |     <meta charset="UTF-8">
    at Parser.raise (D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\@babel\parser\lib\index.js:3938:15)
    at Parser.unexpected (D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\@babel\parser\lib\index.js:5247:16)
    at Parser.parseExprAtom (D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\@babel\parser\lib\index.js:6327:20)
    at Parser.parseExprSubscripts (D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\@babel\parser\lib\index.js:5923:21)
    at Parser.parseMaybeUnary (D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\@babel\parser\lib\index.js:5902:21)
    at Parser.parseExprOps (D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\@babel\parser\lib\index.js:5811:21)
    at Parser.parseMaybeConditional (D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\@babel\parser\lib\index.js:5783:21)
    at Parser.parseMaybeAssign (D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\@babel\parser\lib\index.js:5730:21)
    at Parser.parseExpression (D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\@babel\parser\lib\index.js:5683:21)
    at Parser.parseStatementContent (D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\@babel\parser\lib\index.js:7258:21)
    at Parser.parseStatement (D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\@babel\parser\lib\index.js:7144:17)
    at Parser.parseBlockOrModuleBlockBody (D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\@babel\parser\lib\index.js:7695:23)
    at Parser.parseBlockBody (D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\@babel\parser\lib\index.js:7682:10)
    at Parser.parseTopLevel (D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\@babel\parser\lib\index.js:7109:10)
    at Parser.parse (D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\@babel\parser\lib\index.js:8495:17)
    at parse (D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\@babel\parser\lib\index.js:10448:38)
    at parser (D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\@babel\core\lib\transformation\normalize-file.js:170:34)
    at normalizeFile (D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\@babel\core\lib\transformation\normalize-file.js:138:11)
    at runSync (D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\@babel\core\lib\transformation\index.js:44:43)
    at runAsync (D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\@babel\core\lib\transformation\index.js:35:14)
    at process.nextTick (D:\MyProjects\Workspaces\nodejs\ReactJs\react-cnode-teach\node_modules\@babel\core\lib\transform.js:34:34)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! react-cnode-teach@1.0.0 build: webpack --config ./build/webpack.config.js --progess --display-modules --color --display-reasons --mode development
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the react-cnode-teach@1.0.0 build 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\acer\AppData\Roaming\npm-cache_logs\2018-09-13T13_50_03_740Z-debug.log

写回答

1回答

Jokcy

2018-09-14

presets: [‘latest’]  这个写法谁教你的？？？这错误提醒很明显了，你的babel配置并不能解析jsx语法

0
0

React全栈+服务器渲染(ssr)打造社区Webapp

【毕设面试】只会写业务代码？out了，带你学会搭建属于自己的工程！

768 学习 · 414 问题

查看课程

相似问题

babel编译带有装饰器语法的代码报错

回答 4

editorconfig在webstorm里配置后不生效

回答 2

publicPath: &#039;/public&#039;, 请问老师打包后没有public这个文件夹

回答 1

dev-static.js 引入 react-async-bootstrapper 后报错了

回答 2

如果前端js文件有多个入口和vendor怎么样配置

回答 1

打开慕课网App查看更多内容