"Anda mungkin memerlukan loader yang sesuai untuk menangani jenis file ini" dengan Webpack dan Babel

Saya mencoba menggunakan Webpack dengan Babel untuk mengkompilasi aset ES6, tetapi saya mendapatkan pesan kesalahan berikut:

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

Inilah tampilan konfigurasi Webpack saya:

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/
      }
    ]
  }
}

Berikut adalah langkah middleware yang menggunakan 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);
});

Semua file index.js saya lakukan adalah mengimpor reaksi, tetapi sepertinya 'babel-loader' tidak berfungsi.

Saya menggunakan 'babel-loader' 6.0.0.

Anda perlu menginstal es2015preset:

npm install babel-preset-es2015

lalu konfigurasikan babel-loader:

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

Pastikan Anda telah menginstal babel preset es2015 .

Contoh devDependencies package.json adalah:

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

Sekarang konfigurasikan babel-loader di konfigurasi webpack Anda:

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

tambahkan file .babelrc ke root proyek Anda di mana modul node berada:

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

Info lebih lanjut:

• babeljs.io - menggunakan babel dengan webpack

• babeljs.io - dokumen tentang .babelrc

• react-webpack-cookbook - konfigurasikan bereaksi dengan webpack

• repo react-webpack-example

Jika Anda menggunakan Webpack> 3 maka Anda hanya perlu menginstal babel-preset-env, karena akun preset ini untuk es2015, es2016 dan 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',
            }
        }]
    }
};

Ini mengambil konfigurasinya dari saya .babelrc file :

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

Karena pembaruan dan perubahan dari waktu ke waktu, kompatibilitas versi mulai menyebabkan masalah dengan konfigurasi.

Webpack.config.js Anda harus seperti ini, Anda juga dapat mengonfigurasi sesuka Anda.

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

Hal lain yang perlu diperhatikan adalah perubahan args, Anda harus membaca dokumentasi babel https://babeljs.io/docs/en/presets

.babelrc

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

NB: Anda harus memastikan bahwa @ babel / preset-env & @ babel / preset-react di atas telah diinstal di dependensi package.json Anda

PEMBARUAN TIM BABEL:

Kami sangat senang Anda mencoba menggunakan sintaks ES2015, tetapi alih-alih melanjutkan preset tahunan, tim merekomendasikan penggunaan babel-preset-env. Secara default, ia memiliki perilaku yang sama seperti preset sebelumnya untuk mengompilasi ES2015 + ke ES5

Jika Anda menggunakan Babel versi 7, Anda perlu menjalankan npm install @ babel / preset-env dan memiliki "presets": ["@ babel / preset-env"] dalam .babelrckonfigurasi Anda .

Ini akan mengkompilasi semua fitur terbaru ke es5 kode transpiled:

Prasyarat :

1. Webpack 4+
2. Babel 7+

Langkah-1:: npm install --save-dev @ babel / preset-env

Langkah-2: Untuk mengkompilasi JSXkode ke es5, babel menyediakan @babel/preset-reactpaket untuk mengonversi jsxfile ekstensi react ke kode yang dapat dimengerti browser asli.

Langkah-3: npm install --save-dev @ babel / preset-react

Langkah-4: buat .babelrcfile di dalam jalur root proyek Anda jika webpack.config.jsada.

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

Langkah-5: webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, 'src/index.js'),
    output: {
        path: path.resolve(__dirname, 'output'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [{
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            filename: "./index.html"
         })
    ]
}

Saat menggunakan Ketikan:

Dalam kasus saya, saya menggunakan sintaks yang lebih baru dari webpack v3.11 dari halaman dokumentasi mereka, saya baru saja menyalin konfigurasi pemuat css dan gaya dari situs web mereka. Kode yang dikomentari (API lebih baru) menyebabkan kesalahan ini, lihat di bawah.

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

Cara yang benar adalah dengan mengatakan ini:

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

dalam larik properti loader.

Yang ini melempar saya untuk berputar. Angular 7, Webpack Saya menemukan artikel ini jadi saya ingin memberikan kredit ke Artikel https://www.edc4it.com/blog/web/helloworld-angular2.html

Apa solusinya adalah: // pada file komponen Anda. gunakan template karena webpack akan memperlakukannya sebagai template teks: require ('./ process.component.html')

agar karma menafsirkannya npm install add html-loader --save-dev {test: /.html$/, gunakan: "html-loader"},

Semoga ini bisa membantu seseorang