のWebPACKの解決延長

Question

警告「モジュールが見つかりません」：私はWebPACKのにかなり新しいので、私はWebPACKのを設定しようとしている、と私はすべてがes2015と正常に動作してしまった

オーケー優しくしてくださいとwebpackでの輸入。私はファイル拡張子を宣言する必要がないように、拡張子をresolveに追加しようとしていますが、ファイルやモジュールを見つけることができないと言います。なぜこれができるのか？ここに私のindex.jsxと私のwebpack.config.js

// index.jsx 
import * as React from 'react' 
import * as ReactDOM from 'react-dom' 
import { Provider } from 'react-redux' 

import App from './components/App' 
import configureStore from './store/configureStore.js' 

const store = configureStore() 

ReactDOM.render(
    <Provider store={store}> 
    <App /> 
    </Provider>, 
    document.getElementById('app') 
) 

はここだwebpack.configです：

// webpack.config 
var path = require('path') 
var webpack = require('webpack') 

module.exports = { 
    devtool: 'eval', 
    entry: [ 
     'webpack-dev-server/client?http://localhost:3000', 
     'webpack/hot/only-dev-server', 
     './src/javascripts/index.jsx' 
    ], 
    output: { 
     path: path.join(__dirname, '/dist'), 
     filename: 'bundle.js', 
     publicPath: '/public/' 
    }, 

    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
    new webpack.DefinePlugin({ 
     __DEV__: process.env.NODE_ENV !== 'production' 
    }) 
    ], 

    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       loaders: [ 'react-hot', 'babel-loader' ], 
     include: path.join(__dirname, '/src') 
      }, 
     { 
     test: /\.scss$/, 
     loader: [ 'style', 'css', 'sass' ] 
     }, 
     { 
     test: /\.json$/, 
     loader: 'json' 
     } 
     ], 

     preLoaders: [ 
      { test: /\.js$/, loader: 'source-map-loader' } 
     ], 

    resolve: { 
     root: [ 
     path.resolve(path.join(__dirname, 'src', 'stylesheets')), 
     path.resolve(path.join(__dirname, 'src', 'javascripts')) 
     ], 
     alias: { 
     '@style': path.resolve(path.join(__dirname, 'src', 'stylesheets')), 
     '@script': path.resolve(path.join(__dirname, 'src', 'javascripts')) 
     }, 
     extensions: [ 
     '', 
     '.webpack.js', 
     '.web.js', 
     '.jsx', 
     '.js', 
     '.scss' 
     ] 
    } 
    } 
}; 

私が言ったように、私はimport App from './components/App.jsx'にimport App from './components/App'からindex.jsxで5行目を変更した場合、それが動作し、私は理由はわかりません。何かご意見は？

Answer 1

あなたのmoduleは、resolveの周囲にあります。これは設定ファイルを破壊しています。 resolveが存在しない場合、Webpackは拡張機能を解決できず、拡張機能を追加する必要があります。これらのタイプのエラーを追跡して防止するには、常にインデントする必要があります。

---

エクステンションなしでインポートすると、Webpackはエクステンションの解決方法を認識しないため、正しくロードできません。 .jsxを指定してBabelを入力し、明示的に.jsxとしてインポートする必要があります。