Webpack错误：您可能需要一个合适的加载程序来处理此文件类型

Question

我是webpack的新手，并且正在尝试设置应用程序。从以前的问题来看，我认为我设置babel-loader的方式肯定有问题，但是我无法看到我的错误是什么。其他人能看到它吗？

webpack.config.js：

var webpack = require('webpack'); 
 
var path = require('path'); 
 

 
var BUILD_DIR = path.resolve(__dirname, 'waves/client/public'); 
 
var APP_DIR = path.resolve(__dirname, 'waves/client/app'); 
 

 
var config = { 
 
    entry: APP_DIR + '/index.jsx', 
 
    output: { 
 
    path: BUILD_DIR, 
 
    filename: 'bundle.js' 
 
    }, 
 
    module: [ 
 
    { 
 
    test: /\.jsx?/, 
 
    include: APP_DIR, 
 
    loaders: ["babel-loader"], 
 
    query: { 
 
     presets: ['es2015', 'react'] 
 
    } 
 
    } 
 
    ] 
 
}; 
 

 
module.exports = config;

babel.rc

{ 
 
\t "presets": ["es2015", "react"] 
 
}

Index.jsx

import React from 'react'; 
 
import ReactDom from 'react-dom'; 
 

 
class App extends React.Component { 
 

 
\t render() { 
 
\t \t return <p>Hello React!</p>; 
 
\t } 
 
} 
 

 
ReactDom.render(<App />, document.getElementById('app'));

Answer 1

下面是模块选件的文档对象：https://webpack.github.io/docs/configuration.html#module

如果您已经安装babel-preset-2015和babel-preset-react NPM模块和webpack.config.js（无需与查询babel.rc文件以下预置）应该工作：

var webpack = require('webpack'); 
var path = require('path'); 

var BUILD_DIR = path.resolve(__dirname, 'waves/client/public'); 
var APP_DIR = path.resolve(__dirname, 'waves/client/app'); 

var config = { 
    entry: APP_DIR + '/index.jsx', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [{ 
     test: /\.jsx?/, 
     include: APP_DIR, 
     loader: "babel-loader", 
     query: { 
     presets: ['es2015', 'react'] 
     } 
    }] 
    } 
}; 

module.exports = config; 

Answer 2

更改您的webpack文件以将babel-loader包含在引号内并包含在装载器数组中，如下所示。在模块中，你可以定义一个装载器数组来处理不同类型的文件，但是一个特定类型的装载器。

var webpack = require('webpack'); 
var path = require('path'); 

var BUILD_DIR = path.resolve(__dirname, 'waves/client/public'); 
var APP_DIR = path.resolve(__dirname, 'waves/client/app'); 

var config = { 
    entry: APP_DIR + '/index.jsx', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js?$/, 
     exclude: /(node_modules|bower_components)/, 
     include: APP_DIR, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015'], 
     } 
     } 
    ] 
    }, 
}; 

module.exports = config;