正確的webpack配置爲babel 6，反應熱負載，webpack中間件

Question

在webpack配置閱讀小說的SO帖子值我仍然無法通過module parse failed錯誤。

的package.json（不是所有的話）

"dependencies": { 
    "babel-core": "^6.7.6", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.6.0", 
    "babel-preset-es2015-webpack": "^6.4.0", 
    "babel-preset-react": "^6.5.0", 
    "babel-preset-stage-0": "^6.5.0", 
    "react": "^0.14.6", 
    "react-dom": "^0.14.6", 
    "react-hot-loader": "^1.3.0", 
    "webpack": "^1.12.14", 
    "webpack-dev-middleware": "^1.6.1", 
    "webpack-hot-middleware": "^2.10.0" 
} 

結構

package.json 
node_modules 
.babelrc 
client/ 
    webpack.config.js 
    .babelrc   # duplicated just for shits and giggles... 
    src/ 
     index.jsx 
     components/ 
server/ 
    index.js 
    //more stuff   

客戶機/ webpack.config.js

var path = require('path'), 
    webpack = require('webpack'); 

module.exports = { 
    devtool: 'eval', 
    context: __dirname + '/src', 
    entry: [ 
    'webpack-hot-middleware/client', 
    __dirname + '/src/index.jsx' 
    ], 
    output: { 
    path: __dirname + '/public', 
    filename: 'bundle.js', 
    publicPath: 'http://localhost:12345' 
    }, 
    plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin() 
    ], 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx$/, 
     include: __dirname + '/src', 
     loaders: ['react-hot', 'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0'], 
     query: { 
      plugins: ['./babelRelayPlugin'], 
      presets: ['es2015', 'react'] 
     } 
     } 
    ] 
    } 
}; 

.babelrc

{ "presets": ["react", "es2015", "stage-0"] } 

客戶/ SRC/index.jsx

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Layout from './src/components/layout.jsx'; 

ReactDOM.render(<Layout />, document.querySelector('#app')); 

被戳在黑暗中修改的WebPack配置，並且不能巴貝爾到transpile ES6。

其他SO帖子經常出現的問題

1. Loaders陣列必須是內部module財產
2. 添加presets陣列您.babelrc
3. npm install --save babel-preset-whatever
4. hot-loader折舊，使用babel-preset-react-hmre
5. 裝載機從右到左裝，從上到下

不知所措。

Answer 1

原來我的context屬性搞亂了一切，但錯誤並沒有那麼有用。 Docs清楚地說明了context的作用，我猜想我沒有足夠小心地注意這一點。

//webpack.config.js 
context: __dirname + '/client/src/', 
target: 'web' 

//index.jsx 

//this will break everything 
import Layout from './src/components/Layout.jsx' 

//this will work 
import Layout from './components/Layout.jsx' 

我剛剛切換，現在一切正常。

Answer 2

easy-react

我創建了一個小型啓動自己。只需檢查我的配置，它爲我工作。