webpack和babel项目使用ES7 async和await出错：ERROR You may need an appropriate loader to handle this file type

在新创建的webpack和babel项目中使用javascript ES7语法及其一些特性如async和await，但是在用webpack构建项目的时候，报如下错误：

ERROR in ./src/server.js Module parse failed: C:\dev\node-async-sample\src\server.js 
Unexpected token (9:22) You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (9:22)

.babelrc文件如下：

{
  "presets": [
    "es2015",
    "node5",
    "stage-0"
  ],
  "plugins": [
    "transform-runtime"
  ]
}

Webpack配置文件如下：

module.exports = {
  entry: [
    'babel-polyfill',
    './src/server.js'
  ],
  output: {
    path: __dirname + '/dist',
    filename: 'server_bundle.js'
  },
  resolve: {
      extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        include: __dirname + '/src',
        loader: 'babel-loader'
      }
    ]
  }
};

解决办法

首先是上面的配置中路径不对，不应该使用字符串表示路径，应该使用如下方式：

{
   test: /\.jsx?$/,
   include: path.join(__dirname, 'src'),
   loader: 'babel-loader'
}

这样就可以解决解析问题了，但是仍然需要处理.json文件，通过添加相应的扩展解决节，以及添加json-loader：

{ test: /\.json$/, loader: 'json-loader' }

然后还要解决确实的模块警告问题，例如fs和net。建议使用babel-cli预编译服务器代码：

babel src --out-dir dist