正确的 babel 6 webpack 配置，react 热加载，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

client/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"] }

client/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 配置，但无法通过 babel 转译 es6。

其他 SO 帖子中反复出现的问题

Loaders 数组必须在 module 属性
将 presets 数组添加到您的 .babelrc
npm install --save babel-preset-whatever
hot-loader折旧，使用babel-preset-react-hmre
加载器从右到左、从上到下加载

一头雾水

Answer 1

easy-react

我为自己创建了一个小启动器。只需检查我的配置，它对我有用。

Answer 2

原来我的 context 属性把一切都搞砸了，但错误并没有那么有用。文档清楚地说明了 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'

我刚刚切换了它，现在一切正常。

正确的 babel 6 webpack 配置，react 热加载，webpack 中间件

correct webpack config for babel 6, react hot load, webpack middleware

node.js

reactjs

webpack

babeljs

webpack-hot-middleware