wake-up-neo.com

"Sie benötigen möglicherweise einen geeigneten Lader, um diesen Dateityp zu verarbeiten" mit Webpack und Babel

Ich versuche, Webpack mit Babel zu verwenden, um ES6-Assets zu kompilieren, aber es wird folgende Fehlermeldung angezeigt:

You may need an appropriate loader to handle this file type.
| import React from 'react';
| /*
| import { render } from 'react-dom'

So sieht meine Webpack-Konfiguration aus:

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

Hier ist der Middleware-Schritt, der Webpack verwendet:

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

Alle meine index.js-Datei importiert reagieren, aber der 'babel-loader' scheint nicht zu funktionieren.

Ich verwende 'Babel-Loader' 6.0.0.

88
egidra

Sie müssen die Voreinstellung es2015 installieren:

npm install babel-preset-es2015

und dann babel-loader konfigurieren:

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

Stellen Sie sicher, dass Sie die es2015-Babel-Voreinstellung installiert haben.

Ein Beispiel für package.json devDependencies ist:

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

Konfigurieren Sie nun babel-loader in Ihrer Webpack-Konfiguration:

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

fügen Sie dem Stamm Ihres Projekts eine .babelrc - Datei hinzu, in der sich die Knotenmodule befinden

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

Mehr Info: 

31
steven iseki

Wenn Sie Webpack> 3 verwenden, müssen Sie nur babel-preset-env installieren, da diese Voreinstellung für es2015, es2016 und es2017 gilt.

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

Die Konfiguration wird aus meiner .babelrc-Datei übernommen:

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

Aufgrund von Aktualisierungen und Änderungen im Laufe der Zeit kann die Versionskompatibilität zu Problemen bei der Konfiguration führen.

Ihre webpack.config.js sollte so sein, dass Sie auch konfigurieren können, wie immer Sie passen.

var path = require('path');
var webpack = require("webpack");

module.exports = {
  entry: './src/js/app.js',
  devtool: 'source-map',
    mode: 'development',
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: ["babel-loader"]
    },{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }]
  },
  output: {
    path: path.resolve(__dirname, './src/vendor'),
    filename: 'bundle.min.js'
  }
};

Eine andere Sache zu bemerken, es ist die Änderung der Argumente, sollten Sie Babel Dokumentation lesen https://babeljs.io/docs/en/presets

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

NB: Sie müssen sicherstellen, dass Sie das oben genannte @ babel/preset-env & @ babel/preset-react in Ihren package.json-Abhängigkeiten installiert haben

0
Delino

Dieser wirft mich für eine Spritztour. Angular 7, Webpack Ich habe diesen Artikel gefunden und möchte dem Artikel meine Ehre erweisen https://www.edc4it.com/blog/web/helloworld-angular2.html

Was ist die Lösung: // auf Ihrer Komponentendatei. Vorlage als Webpack verwenden wird als Textvorlage behandelt: require ('./ process.component.html')

damit Karma es interpretiert, npm installiere, füge den HTML-Lader hinzu --save-dev {test: /.html$/, benutze: "html-loader"},

Hoffe das hilft jemandem

0
Oliver Champet

Bei Verwendung von TypeScript:

In meinem Fall habe ich die neuere Syntax von webpack v3.11 von ihrer Dokumentationsseite verwendet Ich habe gerade die Konfiguration der css- und style-loader von ihrer Website kopiert .. __ Der auskommentierte Code (neuere API) verursacht diesen Fehler, siehe unten .

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

Der richtige Weg ist, dies zu sagen:

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

im Array der Eigenschaft loaders.

0
Legends