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"]}