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;