web-dev-qa-db-fra.com

"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 ressources ES6, mais le message d'erreur suivant s'affiche:

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 du 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 mon fichier index.js fait est importer, mais il semble que le 'chargeur-babel' ne fonctionne pas.

J'utilise 'babel-loader' 6.0.0.

javascriptwebpackbabeljses6-module-loader
88
egidra

Vous devez installer le préréglage es2015:

npm install babel-preset-es2015

puis configurez babel-loader:

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

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

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

Configurez maintenant babel-loader dans votre configuration de pack Web:

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

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

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

Plus d'informations: 

31
steven iseki

Si vous utilisez Webpack> 3, vous devez uniquement installer babel-preset-env, car ce préréglage prend en compte 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 prend sa configuration dans mon fichier .babelrc:

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

En raison des mises à jour et des modifications apportées aux heures supplémentaires, la compatibilité des versions commence à poser des problèmes de configuration.

Votre webpack.config.js devrait être comme ceci, vous pouvez également configurer comment vous modifiez.

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 est le changement d'arguments, vous devriez lire la documentation de babel https://babeljs.io/docs/fr/presets

.babelrc

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

NB: vous devez vous assurer que les éléments @ babel/preset-env et @ babel/preset-react ci-dessus sont installés dans vos dépendances package.json.

0
Delino

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 de composant. utiliser template comme webpack le traitera comme du texte template: require ('./ process.component.html')

pour que karma puisse l’interpréter npm installer add html-loader --save-dev { test: /.html$/, utiliser: "html-loader" },

J'espère que ça aide quelqu'un

0
Oliver Champet

Si vous utilisez TypeScript:

Dans mon cas, j'ai utilisé la syntaxe la plus récente de webpack v3.11 à partir de leur page de documentation. .

  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 mettre ceci:

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

dans le tableau de la propriété loaders.

0
Legends