Webpack Error React＆ES6之前在Babelify下工作

Question

我試過從babelify，watchify，browserify轉到webpack，webpack服務器和babel。

我記得6個月前離開webpack，因爲它給了我試圖使用aws-sdk的類似問題。

出於某種原因，每次我建我收到以下錯誤時間：

Hash: 396f0bfb9d565b6f60f0 Version: webpack 1.14.0 Time: 61ms [0] ./src/index.js 0 bytes [built] [failed]

ERROR in ./src/index.js Module parse failed: C:\Users\james\Documents\hyre\src\index.js Unexpected token (9:8) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (9:8) at Parser.pp$4.raise (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15) at Parser.pp.unexpected (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:603:10) at Parser.pp$3.parseExprAtom (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1822:12) at Parser.pp$3.parseExprSubscripts (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1715:21) at Parser.pp$3.parseMaybeUnary (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1692:19) at Parser.pp$3.parseExprOps (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1637:21) at Parser.pp$3.parseMaybeConditional (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1620:21) at Parser.pp$3.parseMaybeAssign (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1597:21) at Parser.pp$3.parseExprList (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:2165:22) at Parser.pp$3.parseSubscripts (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1741:35) at Parser.pp$3.parseExprSubscripts (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1718:17) at Parser.pp$3.parseMaybeUnary (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1692:19) at Parser.pp$3.parseExprOps (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1637:21) at Parser.pp$3.parseMaybeConditional (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1620:21) at Parser.pp$3.parseMaybeAssign (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1597:21) at Parser.pp$3.parseExpression (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1573:21) at Parser.pp$1.parseStatement (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:727:47) at Parser.pp$1.parseTopLevel (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:638:25) at Parser.parse (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:516:17) at Object.parse (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:3098:39) at Parser.parse (C:\Users\james\Documents\hyre\node_modules\webpack\lib\Parser.js:902:15) at DependenciesBlock. (C:\Users\james\Documents\hyre\node_modules\webpack\lib\NormalModule.js:104:16) at DependenciesBlock.onModuleBuild (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10) at nextLoader (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25) at C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5 at Storage.finished (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16) at C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\enhanced-resolve\node_modules\graceful-fs\graceful-fs.js:78:16 at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:445:3)

我相信我擁有了一切設置爲需要。 請參閱我的文件：

webpack.config.js

module.exports = { 
entry: './src/index.js', 
    output: { 
    path: __dirname + '/public/js', 
    filename: 'bundle.js', 
    resolve: { 
     extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      cacheDirectory: true, 
      presets: ['react', 'es2015'] 
     } 
     } 
    ] 
    } 
    } 
} 

的package.json

{ 
    "name": "hyre", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "build": "webpack", 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "aws-sdk": "^2.4.4", 
    "babelify": "^7.3.0", 
    "browserify": "^13.0.1", 
    "is-my-date-valid": "^0.1.0", 
    "lodash": "^4.17.2", 
    "moment": "^2.14.1", 
    "react": "^15.1.0", 
    "react-date-picker": "^5.3.26", 
    "react-datepicker": "^0.28.1", 
    "react-dom": "^15.1.0", 
    "watchify": "^3.7.0" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.10.4", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.18.0", 
    "babel-preset-react": "^6.11.1", 
    "react-hot-loader": "^1.3.0", 
    "transform-loader": "^0.2.3", 
    "webpack": "^1.14.0" 
    } 
} 

index.js

/*let message = 'Loaded----->'; 
console.log(message);*/ 

import React from 'react'; 
import { render } from 'react-dom'; 
import App from './components/app'; 

render (<App />, document.getElementById('app')); 

Answer 1

您在的WebPack有錯誤配置。 resolve,module和loaders屬性不應嵌套在output屬性內，它們應該處於同一級別。這是有效的配置：

module.exports = { 
    entry: './src/index.js', 
    output: { 
    path: __dirname + '/public/js', 
    filename: 'bundle.js' 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      presets: ['react', 'es2015'] 
     } 
     } 
    ] 
    } 
}