当我设置Babel ES2015预设时，热模块更换为什么停止在WebPack Dev服务器上工作

Question

我有一个通过webpack dev服务器运行的小应用程序（在开发环境上）。

热模块更换运行良好，我可以在编辑JS文件时拍摄我的更改。

但是，一旦我在babel加载器配置中添加ES2015预设，它就会停止工作！

webpack.config.js ：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
process.env.BABEL_ENV = 'development';
module.exports = {
  entry: {
    app: ['react-hot-loader/patch', path.join(__dirname, 'src')]
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: '[name].js',
  },
  module: {
   rules: [
     {
       test: /.js$/,
       include: path.join(__dirname, 'src'),
       use: {
         loader: 'babel-loader',
         options: {
           cacheDirectory: true,
           presets: ['react'],
         },
       },
     }
   ]
  },
  devServer: {
    historyApiFallback: true,
    quiet: true,
    hotOnly: true,
    contentBase: './build',
    host: 'my-host.local',
    port: 8091,
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000,
    },
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack demo',
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new FriendlyErrorsWebpackPlugin(),
    new webpack.WatchIgnorePlugin([
      path.join(__dirname, 'node_modules')
    ]),
  ],
};

src/index.js文件：

import React from 'react';
import ReactDOM from 'react-dom';
import Component from './Component';
import { AppContainer } from 'react-hot-loader';
const app = document.createElement('div');
document.body.appendChild(app);
const render = App => {
  ReactDOM.render(
    <AppContainer><App /></AppContainer>,
    app
  );
};
render(Component);
if (module.hot) {
  module.hot.accept('./Component', () => render(Component));
}

component.js

import React from 'react';
export default class Title extends React.Component {
  render() {
    return (
      <div>Ass</div>
    );
  }
}

.babelrc

{
  "presets": [
    [
      "react",
      "es2015",
      {
        "modules": false
      }
    ]
  ],
  "env": {
    "development": {
      "plugins": [
        "react-hot-loader/babel"
      ]
    }
  }
}

我更换

presets: ['react'],

presets: ['es2015', 'react'],

热模块替换功能停止工作。.在这里有人有线索吗？

（也不要毫不犹豫地指出我的代码中的不良实践或可避免的并发症）

Answer 1

您需要以下.babelrc（我不知道为什么）。

.babelrc

{
  "presets": [
    ["es2015", {"modules": false}],
    "stage-2",
    "react"
  ],
}

其中阶段2是NPM软件包babel-preset-stage-2。