我正在尝试将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。
您需要安装es2015预设:
es2015
npm install babel-preset-es2015
然后配置babel-loader:
babel-loader
{ test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015'] } }