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

回答

相关问题