React，Webpack热重载的``导入''问题

Question

我的React项目中有一个问题。 我正在使用webpack开发服务器来提供文件。 Webpack构建成功，但是在浏览器上出现错误

“ app.js：7 Uncaught SyntaxError：意外的令牌导入”

在行中：

import React from 'react';

下面是我的webpack.config.js

module.exports = {
context: __dirname + "/app",    
entry: "./app.js",     output: {
    filename: "app.build.js",
    path: __dirname + "/dist",
},

module: {
    loaders: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loaders: ["react-hot-loader", "babel-loader"],
        },
        {
            test: /\.html$/,
            loader: "file?name=[name].[ext]",
        },            

        { 
            test: /\.js$/, 
            exclude: /node_modules/, 
            loaders: ["react-hot-loader", "babel-loader"],
        }

    ]
}    
};

在我的.babelrc中，

{
   "presets": ["react", "es2015"]
}

我试过添加各种babel配置，例如使用stage-0，stage-2等，但是它们都不起作用。 有没有什么办法解决这一问题。

Answer 1

我找到了自己的问题的答案：

热加载器工作的反应方式是webpack config.js中提到的输出文件app.build.js由热加载器服务器直接提供服务，但未在config中提到的特定路径（dist /）下创建。

因此可以使用localhost / app.build.js而不是localhost / dist / app.build.js。

当我在index.html中引用“ script src =“ app.build.js”时，它开始工作。

仅在路径（“ / dist”）中为“ webpack”或“ webpack --watch”命令创建文件app.build.js。 不适用于“ webpack-dev-server”命令。