'import' React 问题，webpack 热重载

Question

我的 React 项目有问题。我正在使用 webpack 开发服务器来提供我的文件。 webpack 构建成功，但我在浏览器上收到类似

的错误

"app.js:7 Uncaught SyntaxError: Unexpected token import"

行中：

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 等，但是 none 其中的一些有效。有什么办法可以解决这个问题吗？

Answer 1

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

React 热加载器的工作方式是 webpack config.js 中提到的输出文件 app.build.js 由热加载器服务器直接提供，而不是在特定路径（dist/）下创建，如中所述配置。

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

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

文件 app.build.js 仅在 "webpack" 或 "webpack --watch" 命令的路径 ("/dist") 中创建。不适用于 "webpack-dev-server" 命令。

'import' React 问题，webpack 热重载

'import' issue with React, webpack hot reload

javascript

reactjs

webpack

babeljs

webpack-dev-server