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

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

Index.jsx

import React from 'react';
import ReactDom from 'react-dom';

class App extends React.Component {

	render() {
		return <p>Hello React!</p>;
	}
}

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文件不需要查询预设）应该可以正常工作：< / p>

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;

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

2 个答案: