"Potrebbe essere necessario un caricatore adeguato per gestire questo tipo di file" con Webpack e Babel

Question

Sto cercando di utilizzare Webpack con Babel per compilare beni ES6, ma sto ottenendo 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' 

Qui è ciò che il mio Webpack config assomiglia:

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 passo 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 eseguendo l'importazione, ma sembra che il "babel-loader" non funzioni.

Sto usando "babel-loader" 6.0.0.

Answer 1

È necessario installare il es2015 preimpostata:

npm install babel-preset-es2015 

e quindi configurare babel-loader:

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

Answer 2

Assicurarsi di avere la babele es2015 preimpostare installato.

Un esempio 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 configurare babel-loader nel webpack config:

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

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

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

Maggiori informazioni:

• babeljs.io - using babel with webpack

• babeljs.io - docs on .babelrc

• react-webpack-cookbook - configure react with webpack

• a react-webpack-example repo

Answer 3

Se si utilizza Webpack> 3, è necessario installare solo 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 raccoglie la sua configurazione dal mio file .babelrc:

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

Answer 4

Quando si utilizza tipografico:

Nel mio caso ho usato la nuova sintassi 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 è quello di mettere questo:

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

nella matrice della proprietà caricatori.