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

Ich versuche, Webpack mit Babel zum Kompilieren von ES6-Assets zu verwenden, erhalte jedoch die folgende Fehlermeldung:

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

Alles, was meine index.js-Datei tut, ist das Importieren von React, aber es scheint, dass der 'Babel-Loader' nicht funktioniert.

Ich benutze 'Babel-Loader' 6.0.0.

Sie müssen die es2015Voreinstellung installieren :

npm install babel-preset-es2015

und dann konfigurieren babel-loader:

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

Stellen Sie sicher, dass Sie die Babel-Voreinstellung es2015 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 den Babel-Loader in Ihrer Webpack-Konfiguration:

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

Fügen Sie eine .babelrc- Datei zum Stammverzeichnis Ihres Projekts hinzu, in der sich die Knotenmodule befinden:

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

Mehr Info:

• babeljs.io - mit babel mit webpack

• babeljs.io - docs auf .babelrc

• React-Webpack-Kochbuch - Konfigurieren Sie React mit Webpack

• ein React-Webpack-Beispiel-Repo

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

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

Dies übernimmt seine Konfiguration aus meiner .babelrcDatei:

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

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

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

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 weitere Sache, die Sie bemerken sollten, ist die Änderung der Argumente. Lesen Sie die Babel-Dokumentation https://babeljs.io/docs/en/presets

.babelrc

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

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

BABEL TEAM UPDATE:

Wir freuen uns sehr, dass Sie versuchen, die ES2015-Syntax zu verwenden, aber anstatt die jährlichen Voreinstellungen fortzusetzen, empfiehlt das Team die Verwendung von babel-preset-env. Standardmäßig hat es das gleiche Verhalten wie die vorherigen Voreinstellungen zum Kompilieren von ES2015 + auf ES5

Wenn Sie Babel Version 7 verwenden, müssen Sie npm install @ babel / preset-env ausführen und "presets": ["@ babel / preset-env"] in Ihrer .babelrcKonfiguration haben.

Dadurch werden alle neuesten Funktionen zu es5-transpiliertem Code kompiliert:

Voraussetzungen :

1. Webpack 4+
2. Babel 7+

Schritt 1 :: npm install --save-dev @ babel / preset-env

Schritt 2: Um JSXCode in es5 zu kompilieren , bietet babel ein @babel/preset-reactPaket zum Konvertieren von Reactjsx Erweiterungsdatei in verständlichen Code des nativen Browsers.

Schritt 3: npm install --save-dev @ babel / preset-react

Schritt 4: Erstellen Sie eine .babelrcDatei im Stammpfad Ihres Projekts, sofern webpack.config.jsvorhanden.

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

Schritt 5: webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, 'src/index.js'),
    output: {
        path: path.resolve(__dirname, 'output'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [{
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            filename: "./index.html"
         })
    ]
}

Bei Verwendung von Typescript:

In meinem Fall habe ich die neuere Syntax von Webpack v3.11 von der Dokumentationsseite verwendet. Ich habe gerade die CSS- und Style Loader-Konfiguration 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 auszudrücken:

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

im Array der Loader-Eigenschaft.

Dieser wirft mich für eine Spritztour. Angular 7, Webpack Ich habe diesen Artikel gefunden, daher möchte ich den Artikel https://www.edc4it.com/blog/web/helloworld-angular2.html gutschreiben

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

damit das Karma es interpretiert, npm install add html-loader --save-dev {test: /.html$/, benutze: "html-loader"},

Hoffe das hilft jemandem