[英]'import' issue with React, webpack hot reload
I have an issue in my react project. 我的React项目中有一个问题。 I am using webpack dev server to serve my files. 我正在使用webpack开发服务器来提供文件。 the webpack build is successful but I am getting an error on the browser like Webpack构建成功,但是在浏览器上出现错误
"app.js:7 Uncaught SyntaxError: Unexpected token import" “ app.js:7 Uncaught SyntaxError:意外的令牌导入”
in the line: 在行中:
import React from 'react';
Below is my webpack.config.js 下面是我的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"],
}
]
}
};
And in my .babelrc
I have 在我的.babelrc
中,
{
"presets": ["react", "es2015"]
}
I have tried adding various babel configs like using stage-0, stage-2, etc., but none of them worked. 我试过添加各种babel配置,例如使用stage-0,stage-2等,但是它们都不起作用。 Is there any way to fix this. 有没有什么办法解决这一问题。
I found answer to my own question: 我找到了自己的问题的答案:
The way react hot loader works is the output file app.build.js mentioned in the webpack config.js is served by the hot loader server directly but not created under specific path(dist/) as mentioned in config. 热加载器工作的反应方式是webpack config.js中提到的输出文件app.build.js由热加载器服务器直接提供服务,但未在config中提到的特定路径(dist /)下创建。
so localhost/app.build.js is available instead of localhost/dist/app.build.js. 因此可以使用localhost / app.build.js而不是localhost / dist / app.build.js。
when I refer "script src="app.build.js" in my index.html it started working. 当我在index.html中引用“ script src =“ app.build.js”时,它开始工作。
The file app.build.js is created in path ("/dist") only for "webpack" or "webpack --watch" command. 仅在路径(“ / dist”)中为“ webpack”或“ webpack --watch”命令创建文件app.build.js。 not for "webpack-dev-server" command. 不适用于“ webpack-dev-server”命令。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.