JSX: Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов - PullRequest
Новая
       7

JSX: Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов

0 голосов
/ 13 мая 2019

Попытка настроить мою среду сборки для анализа React и JSX следующим образом.Однако я получаю страшное «Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов»:

wp.js 

class Welcome extends React.Component {
  render() {
    return <h1>Hello World from React boilerplate</h1>;
  }
}

ReactDOM.render(<Welcome />, document.getElementById('root'));

index.js 

import React from 'react'
import ReactDOM from 'react-dom';
import './wp.js';

webpack.config.js 

....
{
        test: /js\\\.*js$/,
        use:
        [
            {
                loader:'script-loader'
            },
            {
                loader:'babel-loader'
            }
        ]
}
....

package.json 

....
"devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "autoprefixer": "^9.4.7",
    "babel-loader": "^8.0.6",
    "bootstrap": "^4.3.1",
    "clean-webpack-plugin": "^1.0.1",
    "copy-webpack-plugin": "^5.0.0",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "js-offcanvas": "^1.2.9",
    "node-sass": "^4.11.0",
    "popper.js": "^1.14.7",
    "postcss-loader": "^3.0.0",
    "precss": "^4.0.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "sass-loader": "^7.1.0",
    "script-loader": "^0.7.2",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3"
  }
....

Я также поместил здесь мои пресеты babel (как и в .babelrc) 

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

Я знаю, что мне будет не хватать чего-то очень простого, но я просто не вижу этого.Заранее спасибо!

1 Ответ

0 голосов
/ 13 мая 2019

Это потому, что вы JSX-правило на самом деле не ищет .jsx файлов, только .js. Ваше «тестовое» регулярное выражение для этого неверно.

Вот выдержка из конфигурации веб-пакета, которая загружает файлы JSX с babel: 

  {
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: ['babel-loader']
  }

Поищите в Google основные статьи / публикации по настройке React + Webpack, чтобы увидеть полные примеры webpack.config.js файлов для них

...