“Potrebbe essere necessario un caricatore appropriato per gestire questo tipo di file” con Webpack e Babel

Sto cercando di utilizzare Webpack con Babel per compilare le risorse ES6, ma ricevo il seguente messaggio di errore:

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

Ecco come appare la mia configurazione di 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/ } ] } } 

Ecco il passaggio del middleware che fa uso di 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); }); 

Tutto il mio file index.js sta facendo l’importazione reactjs, ma sembra che il ‘babel-loader’ non funzioni.

Sto usando “babel-loader” 6.0.0.

È necessario installare il preset es2015 :

 npm install babel-preset-es2015 

e quindi configura babel-loader :

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

Assicurati di aver installato il preset babele es2015 .

Un esempio di package.json devDependencies è:

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

Ora configura babel-loader nella configurazione del tuo webpack:

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

aggiungi un file .babelrc alla radice del tuo progetto in cui i moduli del nodo sono:

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

Ulteriori informazioni:

  • babeljs.io – usando babele con il webpack

  • babeljs.io – documenti su .babelrc

  • react-webpack-cookbook – configurare reactjs con il webpack

  • un repository di esempio react-webpack

Se si utilizza Webpack> 3, è sufficiente installare babel-preset-env , poiché questo account preimpostato per es2015, es2016 ed 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', } }] } }; 

Questo preleva la sua configurazione dal mio file .babelrc :

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

Quando si usa Typescript:

Nel mio caso ho usato la nuova syntax di webpack v3.11 dalla loro pagina di documentazione Ho appena copiato il modulo di configurazione dei caricatori di CSS e di stile sul loro sito web. Il codice commentato (API più recente) causa questo errore, vedi sotto.

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

Il modo giusto è di mettere questo:

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

nella matrice della proprietà caricatori.