使用Webpack和Babel可能需要一个适当的加载器来处理此文件类型。

53 浏览
0 Comments

使用Webpack和Babel可能需要一个适当的加载器来处理此文件类型。

我正在尝试使用Webpack和Babel编译ES6资源，但是出现了以下错误信息：

您可能需要一个合适的加载器来处理该文件类型。
| 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版本。

0

3 答案

0 Comments

问题的出现原因是webpack在处理文件类型时需要一个适当的加载器，而没有找到。解决方法是安装babel-preset-env，并在配置文件中指定该加载器。

整理成文章如下：

如果你使用的是Webpack > 3，那么你只需要安装babel-preset-env，因为这个预设包含了es2015、es2016和es2017。

以下是一个Webpack配置文件的示例：

var path = require('path');
let webpack = require("webpack");
module.exports = {
    entry: {
        app: './app/App.js',
        vendor: ["react","react-dom"]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '../public')
    },
    module: {
        rules: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader?cacheDirectory=true',
            }
        }]
    }
};

这个配置文件中使用了babel-loader来处理jsx文件。但是，如果你遇到了一个错误信息，内容为"You may need an appropriate loader to handle this file type"，那么问题可能是webpack没有找到适当的加载器来处理这种文件类型。

解决这个问题的方法是在项目中安装babel-preset-env，并在项目的.babelrc文件中配置该预设。以下是一个.babelrc文件的示例：

{

"presets": [

[

"env",

{

"targets": {

"browsers":["last 2 versions"],

"node":"current"

}

}

],["react"]

]

}

在这个示例中，我们配置了babel-preset-env预设，并指定了目标浏览器和node版本。这样，当webpack处理文件时，就可以找到适当的加载器来处理文件类型，从而解决了"You may need an appropriate loader to handle this file type"的错误。

0
0 Comments

问题出现的原因是缺少对应的babel preset和babel loader的配置。

解决方法如下：

1. 首先需要安装`es2015` preset，命令为：`npm install babel-preset-es2015`

2. 然后在配置文件中配置`babel-loader`，示例配置如下：

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

其中`test`属性用于匹配文件类型，`loader`属性指定使用的loader，`exclude`属性指定排除的文件夹，`query`属性用于传递参数，这里配置了使用`es2015` preset。

如果以上解决方法仍然无效，可能需要提问一个单独的问题，并提供完整的配置和错误信息。

另外，需要注意的是`babel-loader`是一个npm模块，不是一个需要编辑的文件。

0
0 Comments

问题的出现原因是没有安装正确的babel preset。解决方法是确保安装了es2015 babel preset，并在webpack配置中配置babel-loader和.babelrc文件。

首先，需要在package.json的devDependencies中添加正确的babel相关依赖。例如：

"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的配置，确保使用了正确的loader和排除了node_modules文件夹：

{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }

接下来，在项目的根目录下添加一个.babelrc文件，其中包含所需的preset配置：

{
  "presets": ["es2015", "stage-0", "react"]
}

最后，在提供的链接中可以找到更多关于babel和webpack的详细配置信息和示例代码。

总结一下，解决该问题的方法是安装正确的babel preset，配置babel-loader和.babelrc文件。如果还有其他问题，可以参考提供的链接进行更多的配置和调试。

0