React 的“导入”问题，webpack 热重载答案

【问题标题】：'import' issue with React, webpack hot reloadReact 的“导入”问题，webpack 热重载
【发布时间】：2017-12-30 13:35:34
【问题描述】：

我的 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 等，但都没有奏效。有没有办法解决这个问题。

【问题讨论】：

你的app.build.js是否包含es6语法？
试试这个stackoverflow.com/questions/38405514/…
可以肯定的是，您不需要.jsx? 和.js 加载程序。第一个将匹配带有或不带有x 的文件扩展名。
@Jose，我在 app.build.js 中看不到任何 es6 语法。我也指 index.html 中的 app.js（我在浏览器中打开）。 app.build.js 是在 webpack 给出 build, watch 命令后生成的。但应参考通过开发服务器 app.js 进行热重载。如果我错了，请纠正我。
@VipulSingh，我已经尝试安装 npm 库，但没有任何帮助。

标签： javascript reactjs webpack webpack-dev-server babeljs

【解决方案1】：

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

react hot loader 的工作方式是 webpack config.js 中提到的输出文件 app.build.js 由 hot loader 服务器直接提供，而不是在 config.js 中提到的特定路径（dist/）下创建。

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

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

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

【讨论】：