Webpack和Babel的“您可能需要适当的加载器来处理此文件类型”

Question

我正在尝试将Webpack与Babel一起使用来编译ES6资产，但是却收到以下错误消息：You may need an appropriate loader to handle this file type.| import React from 'react';| /*| import { render } from 'react-dom'这是我的Webpack配置的样子：var path = require('path');var webpack = require('webpack');module.exports = {  entry: './index',  output: {    path: path.join(__dirname, 'dist'),    filename: 'bundle.js',    publicPath: '/dist/'  },  module: {    loaders: [      {        test: /\.jsx?$/,        loader: 'babel-loader',        exclude: /node_modules/      }    ]  }}这是利用Webpack的中间件步骤：var webpack = require('webpack');var webpackDevMiddleware = require('webpack-dev-middleware');var config = require('./webpack.config');var express = require('express');var app = express();var port = 3000;var compiler = webpack(config);app.use(webpackDevMiddleware(compiler, {  noInfo: true,  publicPath: config.output.publicPath}));app.get('/', function(req, res) {  res.sendFile(__dirname + '/index.html');});app.listen(port, function(err) {  console.log('Server started on http://localhost:%s', port);});我的index.js文件正在做的就是导入react，但似乎“ babel-loader”无法正常工作。我正在使用'babel-loader'6.0.0。

Answer 1

您需要安装es2015预设：

npm install babel-preset-es2015

然后配置babel-loader：

{

    test: /\.jsx?$/,

    loader: 'babel-loader',

    exclude: /node_modules/,

    query: {

        presets: ['es2015']

    }

}

Answer 2

确保已安装es2015 babel预设。

一个示例package.json devDependencies是：

"devDependencies": {

  "babel-core": "^6.0.20",

  "babel-loader": "^6.0.1",

  "babel-preset-es2015": "^6.0.15",

  "babel-preset-react": "^6.0.15",

  "babel-preset-stage-0": "^6.0.15",

  "webpack": "^1.9.6",

  "webpack-dev-middleware": "^1.2.0",

  "webpack-hot-middleware": "^2.0.0"

},

现在在您的webpack配置中配置babel-loader：

{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }

将.babelrc文件添加到项目的根模块所在的节点：

{

  "presets": ["es2015", "stage-0", "react"]

}