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.