webpackは.jsxファイル拡張子を認識しません

Question

私たちのプロジェクトでは、すべてのコンポーネントが.jsではなく.jsxのファイル拡張子を持つようにリファクタリングしようとしています。マイwebpack.config.babelファイルは次のようになります。

import fs from "fs" 

const babelrc = JSON.parse(fs.readFileSync("./.babelrc")) 

export default { 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loader: "babel-loader", 
     query: babelrc, 
     exclude: /(node_modules|bower_components)/, 
     }, 
     { 
     test: /\.jsx$/, 
     loader: "babel-loader", 
     query: babelrc, 
     exclude: /(node_modules|bower_components)/, 
     }, 
     { 
     test: /\.json$/, 
     loader: "json-loader", 
     }, 
     { 
     test: /\.css$/, 
     loader: 'style-loader!css-loader', 
     }, 
    ], 
    }, 
} 

をしかし、私は私のclient.jsファイルにimport Main from './components/Main/Main'; を実行しようとすると、それは私がバベルする新たなんだ

Module build failed: Error: ENOENT: no such file or directory, open '/foo/src/components/Main/Main.js' 
@ multi babel-polyfill webpack-dev-server/client?/ webpack/hot/dev-server ./src/client.js 

を示しており、 webpack。 jsxファイル拡張子を登録するには他にどのような場所が必要ですか？

Answer 1

はresolve.extensionsのドキュメントを見てみましょう： https://webpack.js.org/configuration/resolve/#resolve-extensions

あなたはまた、自動的にあなたの設定に以下を追加することにより、.jsx拡張子を持つファイルを解決するために、あなたのWebPACKの設定に以下を追加することができます。

resolve: { 
    extensions: ['.js', '.jsx'] 
} 

_{Btwの場合は、別の.jsxローダーを削除してローダーの設定を最適化し、最初のローダーをtestの/\.jsx?$/にすることもできます}