“您可能需要一个合适的加载程序来处理此文件类型”与Webpack和Babel [英] "You may need an appropriate loader to handle this file type" with Webpack and Babel

问题描述

我正在尝试使用Webpack和Babel来编译ES6资产，但是我收到以下错误消息：

I am trying to use Webpack with Babel to compile ES6 assets, but I am getting the following error message:

You may need an appropriate loader to handle this file type.
| import React from 'react';
| /*
| import { render } from 'react-dom'

以下是我的Webpack配置：

Here is what my Webpack config looks like:

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的中间件步骤：

Here is the middleware step that makes use of 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文件都在进行反应，但看起来好像是'babel-loader '不工作。

All my index.js file is doing is importing react, but it seems like the 'babel-loader' is not working.

我正在使用'babel-loader'6.0.0。

I am using 'babel-loader' 6.0.0.

推荐答案

您需要安装 es2015 预设：

npm install babel-preset-es2015

然后配置 babel-loader ：

{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
        presets: ['es2015']
    }
}

这篇关于“您可能需要一个合适的加载程序来处理此文件类型”与Webpack和Babel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！