webpack無法識別.jsx文件擴展名

在我們的項目中，我試圖重構我們所有的組件，使其.jsx文件擴展名而不是.js。我webpack.config.babel文件現在看起來是這樣的：webpack無法識別.jsx文件擴展名

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文件擴展名？

來源

2017-10-13 user3683080

我的代碼看起來是這樣的 '''{ 測試：/\.(js|jsx)$/，裝載機： '巴貝爾裝載機'，包括：path.join（__目錄名稱，「/ ../src'） } ''' –

看看文檔爲resolve.extensions： https://webpack.js.org/configuration/resolve/#resolve-extensions

您可以添加以下到您的WebPack配置也自動解決與.jsx擴展名的文件中加入以下到您的配置：

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

_{順便說一下，您還可以通過移除單獨的.jsx裝載機並優化您的裝載機配置，併爲/\.jsx?$/製作第一個裝載機}

來源

2017-10-13 11:35:26 Niekert

webpack無法識別.jsx文件擴展名

回答

相關問題