“You may need an appropriate loader to handle this file type” with Webpack and Babel

问题:

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' 

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/       }     ]   } } 

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); }); 

All my index.js file is doing is importing react, but it seems like the 'babel-loader' is not working.

I am using 'babel-loader' 6.0.0.

回答1:

You need to install the es2015 preset:

npm install babel-preset-es2015 

and then configure babel-loader:

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

回答2:

Make sure you have the es2015 babel preset installed.

An example package.json devDependencies is:

"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" }, 

Now configure babel-loader in your webpack config:

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

add a .babelrc file to the root of your project where the node modules are:

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

More info:

• babeljs.io - using babel with webpack

• babeljs.io - docs on .babelrc

• react-webpack-cookbook - configure react with webpack

• a react-webpack-example repo

回答3:

If you are using Webpack > 3 then you only need to install babel-preset-env, since this preset accounts for es2015, es2016 and es2017.

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',             }         }]     } }; 

This picks up its configuration from my .babelrc file:

{     "presets": [         [             "env",             {                 "targets": {                     "browsers":["last 2 versions"],                     "node":"current"                 }             }         ],["react"]     ] } 

回答4:

When using Typescript:

In my case I used the newer syntax of webpack v3.11 from their documentation page I just copied the css and style loaders configuration form their website. The commented out code (newer API) causes this error, see below.

  module: {         loaders: [{                 test: /\.ts$/,                 loaders: ['ts-loader']             },             {                 test: /\.css$/,                 loaders: [                     'style-loader',                     'css-loader'                 ]             }         ]         // ,         // rules: [{         //     test: /\.css$/,         //     use: [         //         'style-loader',         //         'css-loader'         //     ]         // }]     } 

The right way is to put this:

    {         test: /\.css$/,         loaders: [             'style-loader',             'css-loader'         ]     } 

in the array of the loaders property.

文章来源: “You may need an appropriate loader to handle this file type” with Webpack and Babel