jsx adlı dosya varsa webpack modülü bulamıyor

Webpack.config.js'yi şöyle yazarken

module.exports = {
  entry: './index.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  }
};

Ve index.jsxbir reactmodülü içe aktarıyorumApp

import React from 'react';
import { render } from 'react-dom';

import App from './containers/App';

let rootElement = document.getElementById('box')
render(
  <App />,
  rootElement
)

Ben modül uygulaması adında eğer bulmak App.jsx, sonra webpack içinde diyecekler index.jsxmodülü bulamıyorum Appama adlandırılmış modül uygulaması adında eğer App.js, iyi bu modülü ve iş bulacaksınız.

Yani, kafam karıştı. Benim webpack.config.jsdosyamda test: /\.jsx?$/dosyayı kontrol etmek için yazdım ama neden isim *.jsxbulunamıyor?

Webpack .jsxdosyaları örtük olarak çözmeyi bilmiyor . Uygulamanızda ( import App from './containers/App.jsx';) bir dosya uzantısı belirtebilirsiniz . Mevcut yükleyici testiniz, jsx uzantılı bir dosyayı açıkça içe aktardığınızda babel yükleyiciyi kullanmanızı söylüyor.

veya web .jsxpaketinin çözmesi gereken uzantıları açık bir bildirim olmadan ekleyebilirsiniz:

module.exports = {
  entry: './index.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
  }
};

Webpack 2 için boş uzantıyı bırakın.

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

Yukarıdaki cevaba ekleyerek,

Çözmek tüm uygulamanızda kullandığınız dosya türlerini eklemek zorunda nerede özelliktir.

.Jsx veya .es6 dosyalarını kullanmak istediğinizi varsayalım ; Bunları mutlu bir şekilde buraya dahil edebilirsiniz ve web paketi bunları çözecektir:

resolve: {
  extensions: ["", ".js", ".jsx", ".es6"]
}

Uzantıları çözümleme özelliğine eklerseniz, bunları içe aktarma ifadesinden kaldırabilirsiniz:

import Hello from './hello'; // Extensions removed
import World from './world';

Kahve betiğinin algılanmasını istiyorsanız gibi diğer senaryolar, test mülkünüzü aşağıdaki gibi yapılandırmalısınız :

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'       
  },
  module: {
    loaders: [
      { test: /\.coffee$/, loader: 'coffee-loader' },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  resolve: {
    // you can now require('file') instead of require('file.coffee')
    extensions: ['', '.js', '.json', '.coffee'] 
  }
};

Okunabilirlik ve kopyala-yapıştır kodlama yararına. İşte bu konudaki bay rogers yorumundan web paketi 4 cevabı .

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      resolve: {
        extensions: [".js", ".jsx"]
      },
      use: {
        loader: "babel-loader"
      }
    },
  ]
}

@Max yanıtındaki yorumlarda belirtildiği gibi, webpack 4 için, bunu modül altında listelenen kurallardan birine koymam gerektiğini fark ettim, şöyle:

{
  module: {
    rules: [ 
      {
        test: /\.jsx?$/, 
        resolve: {
          extensions: [".js", ".jsx"]
        },
        include: ...
      }
    ]
  }
}

Benzer bir sorunla karşı karşıyaydım ve çözme özelliğini kullanarak çözebildim .

const path = require('path');
module.exports = {
    entry: './src/app.jsx',
    output: {
        path: path.join(__dirname,'public'),
        filename:  'bundle.js'
    },
    module : {
        rules: [{
            loader: 'babel-loader',
            test: /\.jsx$/,
            exclude: /node_modules/
        }]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    }
}

Gördüğünüz gibi, orada aşağıdaki hatayı çözen .jsx kullandım

./Src/app.jsx Modülündeki HATA bulunamadı: Hata: Çözülemiyor

Referans İçin: https://webpack.js.org/configuration/resolve/#resolve-extensions

Bundle.js'nin hatasız oluşturulduğunu doğrulayın (Görev Çalıştırıcı Günlüğünü kontrol edin).

Bileşen oluşturma işlevindeki html'deki sözdizimi hatası nedeniyle 'jsx adlı dosya varsa modül bulunamıyor' alıyordum.