javascript - org - "Es posible que necesite un cargador apropiado para manejar este tipo de archivo" con Webpack y Babel

webpack org js

Question

Estoy tratando de usar Webpack con Babel para compilar activos ES6, pero recibo el siguiente mensaje de error:

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

Así es como se ve mi configuración de 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/
      }
    ]
  }
}

Aquí está el paso de middleware que hace uso de 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);
});

Todo lo que mi archivo index.js está haciendo es importar reaccionar, pero parece que el ''babel-loader'' no funciona.

Estoy usando ''babel-loader'' 6.0.0.

Answer 1

Asegúrese de tener instalado el preajuste babel es2015 .

Un ejemplo de package.json devDependencies es:

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

Ahora configure babel-loader en la configuración de su paquete web:

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

agregue un archivo .babelrc a la raíz de su proyecto donde están los módulos de nodo:

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

Más información:

• babeljs.io - uso de babel con webpack

• babeljs.io - documentos sobre .babelrc

• reaccionar-webpack-cookbook - configurar reaccionar con webpack

• un repositorio de react-webpack-example

Answer 2

Debido a las actualizaciones y cambios en el tiempo extra, la compatibilidad de la versión comienza a causar problemas con la configuración.

Su webpack.config.js debería ser así, también puede configurar la forma en que se atenúa.

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

Otra cosa para notar es el cambio de argumentos, debe leer la documentación de Babel https://babeljs.io/docs/en/presets

.babelrc

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

NB: debe asegurarse de tener las @ babel / preset-env & @ babel / preset-react instaladas anteriormente en sus dependencias package.json

Answer 3

Este me lanzó a dar una vuelta. Angular 7, Webpack Encontré este artículo, así que quiero dar crédito al artículo https://www.edc4it.com/blog/web/helloworld-angular2.html

Cuál es la solución: // en su archivo componente. use template como webpack lo tratará como plantilla de texto: require (''./ process.component.html'')

para que el karma lo interprete npm install add html-loader --save-dev {test: /.html$/, use: "html-loader"},

Espero que esto ayude a alguien

Answer 4

Si está utilizando Webpack> 3, entonces solo necesita instalar babel-preset-env , ya que este preset representa es2015, es2016 y 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'',
            }
        }]
    }
};

Esto recoge su configuración de mi archivo .babelrc :

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

Answer 5

es2015 instalar el preajuste es2015 :

npm install babel-preset-es2015

y luego configurar babel-loader :

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

Answer 6

Cuando se utiliza el mecanografiado:

En mi caso, utilicé la sintaxis más reciente de webpack v3.11 de su página de documentación, acabo de copiar la configuración de cargadores de estilo y CSS de su sitio web. El código comentado (API más nueva) causa este error, ver más abajo.

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

La forma correcta es poner esto:

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

en la matriz de la propiedad de cargadores.