你可能需要一个合适的加载器来使用 babel/webpack2/react 处理这种文件类型答案

【问题标题】：You may need an appropriate loader to handle this file type with babel/webpack2/react你可能需要一个合适的加载器来使用 babel/webpack2/react 处理这种文件类型
【发布时间】：2017-01-04 15:08:10
【问题描述】：

我目前正在尝试让 webpack 2 与 babel 一起工作并做出反应。

这是我的 webpack.config.js：

'use strict';

module.exports = [
  {
    entry: './src/client/app/private.jsx',
    output: {
      path: './',
      filename: './src/client/private/bundle.js'
    },
    resolve: {
      extensions: ['', '.js', '.jsx']
    },
    module: {
      rules: [
        {
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: [
                  ['es2015', { modules: false }],
                  ['es2016', { modules: false }],
                  'react'
                ],
              }
            },
          ],
          exclude: /node_modules/
        }
      ]
    }
  }
];

.babelrc:

{
  "presets": [
    "es2015",
    "es2016",
    "react"
  ],
  "plugins": [
    "transform-react-jsx",
    "transform-regenerator"
  ]
}

还有错误：

ERROR in ./src/client/app/private.jsx
Module parse failed: /home/karl/dev/node/project/src/client/app/private.jsx Unexpected token (7:16)
You may need an appropriate loader to handle this file type.
| import Index from './containers/Index/index.jsx';
| 
| ReactDOM.render(<Index />, document.getElementById('root'));

【问题讨论】：

标签： reactjs webpack babeljs

【解决方案1】：

我的建议是克隆这个启动器：https://github.com/alicoding/react-webpack-babel，然后确定差异。另外，不确定它是否像删除 module.exports 中的方括号一样简单，但我以前从未见过。通常只是

module.exports = {
    //...
}

【讨论】：

【解决方案2】：

您已经省略了规则的测试属性

rules: [
  {
    test: /\.jsx$/,
    use: [
      {
        loader: 'babel-loader',
        /*
          your loader options
        */
      },
    ],
    exclude: /node_modules/
  }
]

这可能是主要问题，但您可能还需要考虑其他问题：

在output 属性上，您应该使用path 作为输出包的路径，而filename 只作为包的名称，正如它所指示的那样。

output: {
  path: path.resolve(__dirname, src/client/private),
  filename: 'bundle.js'
},

您还必须从您的resolve.extensions 中删除空字符串''。在 webpack 2 中不再需要它了。

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

如果你想为不同的目标导出多个配置，你可以使用一个配置对象数组，否则你应该导出你的单个配置对象。

module.exports = {
...
}

您可以在此处找到有关迁移到 v2 的更多信息： Migrating from v1 to v2

【讨论】：