"npm run build"モジュール解析エラー "このファイルタイプを処理するには適切なローダーが必要な場合があります。"

Question

私と一緒に裸にしてください。私はこの "npm、webpack and babel"ビジネスの新人です。 http://jmfurlott.com/tutorial-setting-up-a-single-page-react-web-app-with-react-router-and-webpack/

# 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 

Answer 1

あなたが二回.jsファイル用ローダーを定義している：私は、「NPMの実行ビルド」を実行すると

は、私はこのチュートリアルに続くコードブロックの下部に

をエラーを取得していますあなたのwebpack設定で。

ではなく

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() 
    ] 

}; 

してみてください。 バーベルなどを使用しているバージョンによっては、presetsも調べる必要があります。 これが動作しない場合、またはwebpackの設定に時間を費やしたくないだけでなく、実行中の反応環境を速くする場合は、http://www.overreact.io/を使用して基本的な反応/ウェブパック環境をセットアップし、そこから移動することをお勧めします。