在我们的项目中，我尝试重构所有组件以获得<?php $i=0 ?>
@foreach($array as $object)
<?php $i++ ?>
<!-- do something here | divs -->
if( $i % 10 == 0 ){
echo '<div class="page-break"></div>'; ....
}
@endforeach
文件扩展名而不是.jsx。我的webpack.config.babel文件现在看起来像这样：
.js但是，当我尝试在client.js文件中运行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',
},
],
},
}
时，它会显示
import Main from './components/Main/Main';
我是babel和webpack的新手。我还需要注册jsx文件扩展名吗？
答案 0 :(得分：6)
查看resolve.extensions的文档：
https://webpack.js.org/configuration/resolve/#resolve-extensions
您可以将以下内容添加到Webpack配置中，以便通过在配置中添加以下内容来自动解析.jsx扩展名的文件：
resolve: {
extensions: ['.js', '.jsx']
}
顺便说一句，您还可以通过删除单独的.jsx加载程序来优化您的加载程序配置，并为test
/\.jsx?$/