Webpack 및 Babel을 사용하여 "이 파일 유형을 처리하려면 적절한 로더가 필요할 수 있습니다."

ES6 자산을 컴파일하기 위해 Babel과 함께 Webpack을 사용하려고하는데 다음과 같은 오류 메시지가 나타납니다.

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 파일이 수행하는 모든 작업은 반응을 가져 오는 것이지만 'babel-loader'가 작동하지 않는 것 같습니다.

'babel-loader'6.0.0을 사용하고 있습니다.

es2015사전 설정 을 설치해야합니다 .

npm install babel-preset-es2015

그런 다음 구성하십시오 babel-loader.

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

es2015 바벨 사전 설정이 설치되어 있는지 확인하십시오 .

package.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 구성에서 babel-loader 를 구성하십시오.

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

노드 모듈이있는 프로젝트의 루트에 .babelrc 파일을 추가합니다 .

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

더 많은 정보:

• babeljs.io-webpack과 함께 babel 사용

• babeljs.io-.babelrc 문서

• react-webpack-cookbook-웹팩으로 반응 구성

• react-webpack-example repo

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파일 에서 구성을 선택 합니다.

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

시간 경과에 따른 업데이트 및 변경으로 인해 버전 호환성이 구성에 문제를 일으키기 시작합니다.

당신의 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'
  }
};

args의 변경이라는 것을 알 수있는 또 다른 사항은 babel 문서 https://babeljs.io/docs/en/presets를 읽어야합니다.

.babelrc

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

주의 : package.json 종속성에 위의 @ babel / preset-env 및 @ babel / preset-react가 설치되어 있는지 확인해야합니다.

BABEL 팀 업데이트 :

ES2015 구문을 사용하려고하니 정말 기쁩니다.하지만 팀은 매년 사전 설정을 계속하는 대신 babel-preset-env를 사용할 것을 권장합니다. 기본적으로 ES2015 +를 ES5로 컴파일하는 이전 사전 설정과 동일한 동작이 있습니다.

Babel 버전 7 을 사용하는 경우 npm install @ babel / preset-env 를 실행 하고 구성에 "presets": [ "@ babel / preset-env"]가 있어야 .babelrc합니다.

모든 최신 기능을 es5 트랜스 파일 코드 로 컴파일합니다 .

전제 조건 :

1. Webpack 4 이상
2. Babel 7+

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

2 단계 :JSX 코드를 es5 로 컴파일하기 위해 babel은 @babel/preset-reactreact jsx확장 파일을 네이티브 브라우저가 이해할 수있는 코드 로 변환 하는 패키지를 제공 합니다 .

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

4 단계 : 존재하는 .babelrc프로젝트의 루트 경로 경로에 파일을 만듭니다 webpack.config.js.

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

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"
         })
    ]
}

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 속성의 배열에 있습니다.

이건 저를 던져 요. Angular 7, Webpack이 기사를 찾았으므로 기사 https://www.edc4it.com/blog/web/helloworld-angular2.html에 크레딧을주고 싶습니다.

해결 방법 : // 구성 요소 파일에 있습니다. 템플릿을 웹팩으로 사용하면 텍스트 템플릿으로 처리됩니다. require ( './ process.component.html')

카르마가 그것을 해석하기 위해 npm install add html-loader --save-dev {test : /.html$/, use : "html-loader"},

이것이 누군가에게 도움이되기를 바랍니다.