Javascript &引用；“npm运行-构建”；模块解析错误“；您可能需要适当的加载程序来处理此文件类型；

当我运行“npm run build”时，我在代码块的底部得到了错误

我跟着

#l
总计36K
drwxrwxr-x 5 dan dan 4.0K 4月5日09:35。
drwxrwxr-x 10丹4.0公里4月1日21:46。。
-rw-rw-r--1丹丹3.1K 4月5日09:22 backup.js
drwxrwxr-x 2 dan dan 4.0K 4月5日09:17 css
-rw-rw-r--1 dan dan 218 Apr 5 09:20 index.html
drwxrwxr-x 3丹丹4.0K 4月5日16:09 js
drwxrwxr-x 10 dan dan 4.0K Apr 5 09:16节点单元
-rw-rw-r--1 dan dan 462 Apr 5 09:18 package.json
-rw-rw-r--1 dan dan 552 Apr 5 09:18 webpack.config.js
#树js
js
├── app.js
└── 组件
└── Login.js
1个目录，2个文件
#更多package.json
{
“名称”：“lnkchk”，
“版本”：“0.0.0”，
“说明”：“lnchk”，
“main”：“index.js”，
“脚本”：{
“开始”：“webpack dev server--hot--progress--colors”，
“构建”：“网页包--进度--颜色”
},
“作者”：“作者”，
“许可证”：“ISC”，
“依赖性”：{
“巴别塔加载器”：“^6.2.4”，
“反应”：“^0.14.8”，
“反应热加载程序”：“^1.3.0”，
“反应路由器”：“^2.0.1”，
“网页包”：“^1.12.14”，
网页包开发服务器“^1.14.1”
}
}
#更多webpack.config.js
var webpack=require（'webpack'）；
module.exports={
条目：[
“webpack/hot/only dev server”，
“/js/app.js”
],
输出：{
路径：_dirname+'/build'，
文件名：“bundle.js”
},
模块：{
装载机：[
{test:/\.js？$/，加载程序：['react-hot'，'babel'，exclude:/node\u modules/}，
{test:/\.js$/，exclude:/node\u modules/，loader:'babel loader'}，
{test:/\.css$/，加载程序：“style！css”}
]
},
插件：[
新的webpack.NoErrorsPlugin（）
]
};
#更多js/app.js
从“React”导入React；
从“反应路由器”导入路由器；
从“react router”导入{DefaultRoute，Link，Route，RouteHandler}；
从“./components/Login.js”导入LoginHandler；
/*
让App=React.createClass（{
render（）{
返回(
家
登录
);
}
});
让路线=（
);
Router.run（路由、函数（处理程序）{
React.render（，document.body）；
});
*/
#更多js/components/Login.js
从“React”导入React；
让Login=React.createClass（{
render（）{
返回（欢迎登录）；
}
});
导出默认登录；
#npm运行构建
> lnkchk@0.0.0build/home/dan/dev/isvalidul/ui
>网页包--进度--颜色
散列：d175b2c5e573c3d92579
版本：网页1.12.14
时间：634ms
[0]多主40字节{0}[Build][1错误]
+2个隐藏模块
./js/app.js中出现错误
模块解析失败：/home/dan/dev/isvalidull/ui/node_modules/react hot loader/index.js/home/dan/dev/isvalidul/ui/node_modules/babel loader/index.js/home/dan/dev/isvalidul/ui/node_modules/babel loader/index.js/home/dan/dev/isvalidull/ui/js/app.js第3行：意外令牌
您可能需要适当的加载程序来处理此文件类型。
|/*REACT HOT LOADER*/if（module.HOT）{（function（）{var ReactHotAPI=require（“/home/dan/dev/isvalidul/ui/node_modules/REACT HOT LOADER/node_modules/REACT HOT api/modules/index.js”），RootInstanceProvider=require（/home/dan/dev/dev/isvalidul/ui/node_modules/REACT HOT LOADER/RootInstanceProvider.js”），ReactMount=require（“)，React=require（“React”）；module.makeHot=module.hot.data？module.hot.data.makeHot:ReactHotAPI（函数（）{return RootInstanceProvider.getRootInstances（ReactMount）；}，React）；}（）；}）try{（函数（）{
| 
|从“React”导入React；
|从“反应路由器”导入路由器；
|从“react router”导入{DefaultRoute，Link，Route，RouteHandler}；
@多主

您在网页配置中为

.js

文件定义了两次加载程序

试一试

相反。 根据您使用的babel等的版本，您可能还需要查看。

---

如果这不起作用，或者您不想花时间设置webpack并快速获得一个运行的react环境，我建议使用设置一个基本的react/webpack环境并从那里开始。

似乎Babel不起作用，所以webpack在导入时遇到了问题。您正确安装了Babel吗？请尝试

npm I-D Babel core

.

# l
total 36K
drwxrwxr-x  5 dan dan 4.0K Apr  5 09:35 .
drwxrwxr-x 10 dan dan 4.0K Apr  1 21:46 ..
-rw-rw-r--  1 dan dan 3.1K Apr  5 09:22 backup.js
drwxrwxr-x  2 dan dan 4.0K Apr  5 09:17 css
-rw-rw-r--  1 dan dan  218 Apr  5 09:20 index.html
drwxrwxr-x  3 dan dan 4.0K Apr  5 16:09 js
drwxrwxr-x 10 dan dan 4.0K Apr  5 09:16 node_modules
-rw-rw-r--  1 dan dan  462 Apr  5 09:18 package.json
-rw-rw-r--  1 dan dan  552 Apr  5 09:18 webpack.config.js
# tree js
js
├── app.js
└── components
    └── Login.js

1 directory, 2 files
# more package.json
{
  "name": "lnkchk",
  "version": "0.0.0",
  "description": "lnchk",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot --progress --colors",
    "build": "webpack --progress --colors"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-loader": "^6.2.4",
    "react": "^0.14.8",
    "react-hot-loader": "^1.3.0",
    "react-router": "^2.0.1",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  }
}
# more webpack.config.js
var webpack = require('webpack');  
module.exports = {  
    entry: [
      'webpack/hot/only-dev-server',
      "./js/app.js"
    ],
    output: {
        path: __dirname + '/build',
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
            { test: /\.css$/, loader: "style!css" }
        ]
    },
    plugins: [
      new webpack.NoErrorsPlugin()
    ]

};
# more js/app.js 
import React from 'react';  
import Router from 'react-router';  
import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';

import LoginHandler from './components/Login.js';

/*
let App = React.createClass({  
  render() {
    return (
      <div className="nav">
        <Link to="app">Home</Link>
        <Link to="login">Login</Link>

        <RouteHandler/>
      </div>
    );
  }
});

let routes = (  
  <Route name="app" path="/" handler={App}>
    <Route name="login" path="/login" handler={LoginHandler}/>
  </Route>
);

Router.run(routes, function (Handler) {  
  React.render(<Handler/>, document.body);
});

*/
# more js/components/Login.js 
import React from 'react';

let Login = React.createClass({ 

  render() {
    return(<div>Welcome to login</div>);
  }
});

export default Login; 
# npm run build

> lnkchk@0.0.0 build /home/dan/dev/isvalidurl/ui
> webpack --progress --colors

Hash: d175b2c5e573c3d92579  
Version: webpack 1.12.14
Time: 634ms
   [0] multi main 40 bytes {0} [built] [1 error]
    + 2 hidden modules

ERROR in ./js/app.js
Module parse failed: /home/dan/dev/isvalidurl/ui/node_modules/react-hot-loader/index.js!/home/dan/dev/isvalidurl/ui/node_modules/babel-loader/index.js!/home/dan/dev/isvalidurl/ui/node_modules/babel-loader/index.js!/home/dan/dev/isvalidurl/ui/js/app.js Line 3: Unexpected token
You may need an appropriate loader to handle this file type.
| /* REACT HOT LOADER */ if (module.hot) { (function () { var ReactHotAPI = require("/home/dan/dev/isvalidurl/ui/node_modules/react-hot-loader/node_modules/react-hot-api/modules/index.js"), RootInstanceProvider = require("/home/dan/dev/isvalidurl/ui/node_modules/react-hot-loader/RootInstanceProvider.js"), ReactMount = require("react/lib/ReactMount"), React = require("react"); module.makeHot = module.hot.data ? module.hot.data.makeHot : ReactHotAPI(function () { return RootInstanceProvider.getRootInstances(ReactMount); }, React); })(); } try { (function () {
| 
| import React from 'react';
| import Router from 'react-router';
| import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';
 @ multi main

module.exports = {  
    entry: [
      'webpack/hot/only-dev-server',
      "./js/app.js"
    ],
    output: {
        path: __dirname + '/build',
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
            { test: /\.css$/, loader: "style!css" }
        ]
    },
    plugins: [
      new webpack.NoErrorsPlugin()
    ]

};