"Vous aurez peut-être besoin d'un chargeur approprié pour gérer ce type de fichier" avec Webpack et Babel

J'essaie d'utiliser Webpack avec Babel pour compiler des actifs ES6, mais j'obtiens le message d'erreur suivant:

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

Voici à quoi ressemble ma configuration 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/
      }
    ]
  }
}

Voici l'étape middleware qui utilise 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);
});

Tout ce que fait mon fichier index.js est d'importer react, mais il semble que le 'babel-loader' ne fonctionne pas.

J'utilise 'babel-loader' 6.0.0.

Vous devez installer le es2015préréglage:

npm install babel-preset-es2015

puis configurez babel-loader:

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

Assurez-vous que le préréglage babel es2015 est installé.

Un exemple de package.json devDependencies est:

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

Maintenant, configurez babel-loader dans votre configuration webpack:

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

ajoutez un fichier .babelrc à la racine de votre projet où se trouvent les modules de nœuds:

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

Plus d'informations:

• babeljs.io - utilisation de babel avec webpack

• babeljs.io - documentation sur .babelrc

• react-webpack-cookbook - configurer react avec webpack

• un référentiel react-webpack-example

Si vous utilisez Webpack> 3, il vous suffit d'installer babel-preset-env, car ce préréglage compte pour es2015, es2016 et 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',
            }
        }]
    }
};

Cela récupère sa configuration de mon .babelrcfichier:

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

En raison des mises à jour et des modifications supplémentaires, la compatibilité des versions commence à causer des problèmes de configuration.

Votre webpack.config.js devrait être comme ça, vous pouvez également configurer la façon dont vous l'avez dim.

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

Une autre chose à noter que c'est le changement d'arguments, vous devriez lire la documentation babel https://babeljs.io/docs/en/presets

.babelrc

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

NB: vous devez vous assurer que vous avez installé le @ babel / preset-env & @ babel / preset-react ci-dessus dans vos dépendances package.json

MISE À JOUR DE L'ÉQUIPE BABEL:

Nous sommes ravis que vous essayiez d'utiliser la syntaxe ES2015, mais au lieu de continuer les préréglages annuels, l'équipe recommande d'utiliser babel-preset-env. Par défaut, il a le même comportement que les préréglages précédents pour compiler ES2015 + vers ES5

Si vous utilisez Babel version 7, vous devrez lancer npm install @ babel / preset-env et avoir des "presets": ["@ babel / preset-env"] dans votre .babelrcconfiguration.

Cela compilera toutes les dernières fonctionnalités en code transpilé es5 :

Prérequis :

1. Webpack 4+
2. Babel 7+

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

Étape 2: Afin de compiler le JSXcode en es5, babel fournit un @babel/preset-reactpackage pour convertir le jsxfichier d'extension de réaction en code compréhensible par le navigateur natif.

Étape 3: installation de npm --save-dev @ babel / preset-react

Étape 4: créez un .babelrcfichier à l'intérieur du chemin d'accès racine de votre projet, là où il webpack.config.jsexiste.

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

Étape 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"
         })
    ]
}

Lors de l'utilisation de Typescript:

Dans mon cas, j'ai utilisé la nouvelle syntaxe de webpack v3.11 à partir de leur page de documentation, je viens de copier la configuration des chargeurs css et de style de leur site Web. Le code commenté (API plus récente) provoque cette erreur, voir ci-dessous.

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

La bonne façon est de dire ceci:

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

dans le tableau de la propriété loaders.

Celui-ci me jette pour un tour. Angular 7, Webpack J'ai trouvé cet article donc je veux donner crédit à l'article https://www.edc4it.com/blog/web/helloworld-angular2.html

Quelle est la solution: // sur votre fichier composant. utiliser un modèle comme webpack le traitera comme un modèle de texte: require ('./ process.component.html')

pour que karma l'interprète npm install ajoutez html-loader --save-dev {test: /.html$/, utilisez: "html-loader"},

J'espère que cela aide quelqu'un