"Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов" с Webpack и Babel
Я пытаюсь использовать Webpack с Babel для компиляции ES6 активов, но я получаю следующее сообщение об ошибке:
You may need an appropriate loader to handle this file type.
| import React from 'react';
| /*
| import { render } from 'react-dom'
вот как выглядит мой webpack config:
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/
}
]
}
}
вот промежуточный шаг, который использует 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);
});
весь мой индекс.js-файл делает импорт react, но похоже, что "babel-loader" не работает.
Я использую 'babel-loader' 6.0.0.
4 ответа:
вам нужно установить
es2015
настройки:npm install babel-preset-es2015
и затем настроить
babel-loader
:{ test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015'] } }
убедитесь, что у вас есть es2015 Бабель предустановленных установлен.
пример пакета.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" },
Теперь настроить Бабель-погрузчик в вашей конфигурации webpack:
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
добавить .babelrc файл в корень вашего проекта, где узел модули:
{ "presets": ["es2015", "stage-0", "react"] }
Подробнее:
если вы используете Webpack > 3, то вам нужно только установить
babel-preset-env
, так как этот пресет учитывает es2015, es2016 и 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', } }] } };
это поднимает свою конфигурацию от моего
.babelrc
file:{ "presets": [ [ "env", { "targets": { "browsers":["last 2 versions"], "node":"current" } } ],["react"] ] }
при использовании Typescript:
в моем случае я использовал более новый синтаксис webpack v3. 11 с их страницы документации Я просто скопировал конфигурацию css и загрузчиков стилей с их веб-сайта. Закомментированный код (более новый API) вызывает эту ошибку, см. ниже.
module: { loaders: [{ test: /\.ts$/, loaders: ['ts-loader'] }, { test: /\.css$/, loaders: [ 'style-loader', 'css-loader' ] } ] // , // rules: [{ // test: /\.css$/, // use: [ // 'style-loader', // 'css-loader' // ] // }] }
правильный путь, чтобы поставить это:
{ test: /\.css$/, loaders: [ 'style-loader', 'css-loader' ] }
в массиве свойства loaders.