Webpack + React16 + Javascript ES6 "예기치 않은 토큰"오류

Question

나는이 질문에 대해 약 1000 번 질문했지만, 작동하는 해결책을 찾지 못했음을 알고 있습니다. 여전히 같은 오류가 발생합니다. 여기 내 설정 파일은 다음과 같습니다

package.json :

{ 
    "scripts": { 
     "start": "webpack-dev-server", 
     "build": "webpack" 
    }, 
    "dependencies": { 
     "jquery": "^3.2.1", 
     "react": "^16.1.1", 
     "react-dom": "^16.1.1" 
    }, 
    "devDependencies": { 
     "babel": "^6.23.0", 
     "babel-cli": "^6.26.0", 
     "babel-core": "^6.26.0", 
     "babel-loader": "^7.1.2", 
     "babel-preset-es2015": "^6.24.1", 
     "babel-preset-react": "^6.24.1", 
     "babel-preset-stage-0": "^6.24.1", 
     "clean-webpack-plugin": "^0.1.17", 
     "css-loader": "^0.28.7", 
     "html-webpack-plugin": "^2.30.1", 
     "style-loader": "^0.19.0", 
     "webpack": "^3.8.1", 
     "webpack-dev-server": "^2.9.4" 
    } 
} 

webpack.config.js :

이

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

module.exports = { 
    entry: './src/app/app.jsx', 
    devtool: 'source-map', 
    devServer: { 
     contentBase: path.join(__dirname, "dist"), 
     hot: true 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.css$/, 
       use: [ 
        'style-loader', 
        'css-loader' 
       ] 
      } 
     ], 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       loader: "babel-loader", 
       query: 
        { 
         presets: ['es2015', 'react'] 
        } 
      } 
     ] 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      template: './src/app/index.html' 
     }), 
     new webpack.NamedModulesPlugin(), 
     new webpack.HotModuleReplacementPlugin() 
    ], 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     filename: 'app.bundle.js' 
    } 
}; 

app.jsx :

import React from "react" 

React.render(<h1>hello world</h1>, document.getElementById("root-component")); 

웹팩 다음과 같은 오류가 발생합니다 :

ERROR in ./src/app/app.jsx 
Module parse failed: Unexpected token (3:13) 
You may need an appropriate loader to handle this file type. 
| import React from "react" 
| 
| React.render(<h1>hello world</h1>, document.getElementById("root-component")); 

여러 솔루션 (예 : .babelrc 파일을 사전 설정으로 추가)을 시도했지만 아무 것도 작동하지 않았습니다. 어떤 도움이 필요합니까?

Answer 1

웹 팩 v3에 따라 webpack.config.js가 잘못되었습니다.

CSS를로드하는 것처럼 다른 배열을 rules 배열에 추가해야합니다.
query의 이름을 options으로 변경해야합니다.

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

module.exports = { 
    entry: './src/app/app.jsx', 
    devtool: 'source-map', 
    devServer: { 
     contentBase: path.join(__dirname, "dist"), 
     hot: true 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       use: [ 
        { 
         loader: "babel-loader", 
         options: { 
          presets: ['es2015', 'react'] 
         } 
        } 
       ] 
      }, 
      { 
       test: /\.css$/, 
       use: [ 
        'style-loader', 
        'css-loader' 
       ], 
      } 
     ], 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      template: './src/app/index.html' 
     }), 
     new webpack.NamedModulesPlugin(), 
     new webpack.HotModuleReplacementPlugin() 
    ], 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     filename: 'app.bundle.js' 
    } 
}; 

하기 전에 :

ERROR in ./src/app/app.jsx Module parse failed: Unexpected token (3:13)

ater에 (제대로 만들어 결합 상품) :

다음과 같이

고정 webpack.config.js는 v3으로 v2에서 이동에 대한보다 자세한 정보를 원하시면 Webpack Documentation를 참조

app.bundle.js 424 kB 0 [emitted] [big] main app.bundle.js.map 499 kB 0 [emitted] main