程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Webpack和Babel“您可能需要适当的加载器来处理此文件类型”大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决Webpack和Babel“您可能需要适当的加载器来处理此文件类型”?

开发过程中遇到Webpack和Babel“您可能需要适当的加载器来处理此文件类型”的问题如何解决?下面主要结合日常开发的经验,给出你关于Webpack和Babel“您可能需要适当的加载器来处理此文件类型”的解决方法建议,希望对你解决Webpack和Babel“您可能需要适当的加载器来处理此文件类型”有所启发或帮助;

您需要安装es2015预设:

npm install babel-preset-es2015

然后配置babel-loader

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

解决方法

我正在尝试将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。

大佬总结

以上是大佬教程为你收集整理的Webpack和Babel“您可能需要适当的加载器来处理此文件类型”全部内容,希望文章能够帮你解决Webpack和Babel“您可能需要适当的加载器来处理此文件类型”所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: