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”命令。