正确的 babel 6 webpack 配置，react hot load，webpack 中间件答案

【问题标题】：correct webpack config for babel 6, react hot load, webpack middleware正确的 babel 6 webpack 配置，react hot load，webpack 中间件
【发布时间】：2016-07-31 05:58:02
【问题描述】：

阅读了小说中有关 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
加载器从右到左，从上到下加载

不知所措。

【问题讨论】：

您的package.json 中似乎有一个尾随,
复制粘贴不正确
你能把你的项目推送到 GitHub 上吗？更容易看出问题所在。我有关于配置 Babel 6 here 的笔记。希望这会有所帮助。

标签： node.js reactjs webpack babeljs webpack-hot-middleware

【解决方案1】：

原来我的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'

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

【讨论】：

【解决方案2】：

easy-react

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

【讨论】：

在之前的尝试中，我已经让 babel 6 与 webpack 开发服务器一起工作，但是现在当我尝试使用带有 express 的热中间件时，我的配置被破坏了，但是谢谢。