web-dev-qa-db-ja.com

WebpackとBabelでは、「このファイルタイプを処理するには適切なローダーが必要になるかもしれません」

Webpackを使用してES6アセットをコンパイルしようとしていますが、次のようなエラーメッセージが表示されます。

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

これが私の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/
      }
    ]
  }
}

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

私のindex.jsファイルがインポートしているのはすべてreactですが、 'babel-loader'が機能していないようです。

私は 'babel-loader' 6.0.0を使っています。

javascriptwebpackbabeljses6-module-loader
93
egidra

es2015プリセットをインストールする必要があります。

npm install babel-preset-es2015

そしてbabel-loaderを設定します。

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

es2015バベルプリセットがインストールされていることを確認してください。

package.jsondevDependenciesの例は次のとおりです。

"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の設定でbabel-loaderを設定してください。

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

ノードモジュールがあるプロジェクトのルートに。babelrcファイルを追加します。

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

より詳しい情報：

31
svnm

Webpack> 3を使用している場合は、このプリセットがes2015、es2016、およびes2017を占めるため、babel-preset-envをインストールするだけで済みます。

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ファイルからその設定をピックアップします。

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

時間の経過による更新や変更により、バージョンの互換性が設定の問題を引き起こし始めます。

あなたのwebpack.config.jsはこのようなものであるべきです、あなたがどれだけ薄暗いかを設定することもできます。

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

もう一つのことはそれが引数の変更であることに気づくために、あなたはbabelドキュメント https://babeljs.io/docs/en/presets を読むべき

.babelrc

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

注意：上記の@ babel/preset-envと@ babel/preset-reactがpackage.jsonの依存関係にインストールされていることを確認する必要があります。

0
Delino

これは私にスピンを投げます。 Angular 7、Webpackこの記事を見つけましたので、記事 https://www.edc4it.com/blog/web/helloworld-angular2を信頼したいと思います。 html

解決策は何ですか？//コンポーネントファイルに。 webpackとしてテンプレートを使用するとテキストテンプレートとしてそれを扱います：require（ './ process.component.html'）

それを解釈するためにカルマがnpm install add html-loader --save-dev {test：/.html$/、を使う： "html-loader"}、

これが誰かに役立つことを願っています

0
Oliver Champet

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プロパティの配列内。

0
Legends