您可能需要适当的加载器才能通过babel / webpack2 / react处理此文件类型

Question

我目前正在尝试使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'));

Answer 1

我的建议是克隆此入门程序： https : //github.com/alicoding/react-webpack-babel ，然后识别差异。 另外，不确定是否像删除module.exports中的方括号一样简单，但是我之前从未见过。 通常只是

module.exports = {
    //...
}

Answer 2

您已省略规则的测试属性

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

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

在output属性上，应将path用作输出包的路径，而filename仅将bundle的名称用作filename名，这表明。

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

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

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

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

module.exports = {
...
}

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