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仅用于包的名称，因为它表示如此。

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

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

2 个答案: