本文介绍了“您可能需要一个合适的加载程序来处理这种文件类型"使用 Webpack 和 Babel的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用 Webpack 和 Babel 来编译 ES6 资产,但收到以下错误消息:
I am trying to use Webpack with Babel to compile ES6 assets, but I am getting the following error message:
You may need an appropriate loader to handle this file type.
| import React from 'react';
| /*
| import { render } from 'react-dom'
这是我的 Webpack 配置的样子:
Here is what my Webpack config looks like:
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 的中间件步骤:
Here is the middleware step that makes use of 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' 不起作用.
All my index.js file is doing is importing react, but it seems like the 'babel-loader' is not working.
我使用的是 'babel-loader' 6.0.0.
I am using 'babel-loader' 6.0.0.
推荐答案
您需要安装es2015
预设:
npm install babel-preset-es2015
然后配置babel-loader
:
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
这篇关于“您可能需要一个合适的加载程序来处理这种文件类型"使用 Webpack 和 Babel的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!