Как перенести JSX в Webpack 4 - PullRequest
Новая
       12

Как перенести JSX в Webpack 4

0 голосов
/ 25 сентября 2018

Я прошел через это решение .Я попытался поместить объект разрешения как внутри правил, так и вне правил, но все равно получаю ту же ошибку.

Я также пытался обновить npm и переустановить его на всякий случай, но не повезло.

Структура каталогов: 

- src/
  - components/
    - Card/
      - card.jsx
    - Sidebar.js
    - Dashboard.js
  - app.js

Поскольку я использую babel-loader, я импортировал мои jsx файлы, подобные этим.

import Card from "./Card/Card";

Я попытался импортироватьиспользуя также «.jsx», но я все еще получаю ту же ошибку, которая не решается.

Сообщение об ошибке после запуска webpack: 

 ERROR in ./src/components/Sidebar.js
 Module not found: Error: Can't resolve './Card/Card' in 
  'E:\React\accounting\src\components'
   @ ./src/components/Sidebar.js 40:0-31 190:29-33
   @ ./src/components/Dashboard.js
   @ ./src/app.js
   @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.js

файл webpack.config.js: 

 const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
  path: path.join(__dirname, 'public'),
  filename: 'bundle.js'
},
module: {
  rules: [{
    loader: 'babel-loader',
    test: /\.jsx?$/,
    exclude: /node_modules/,
    resolve: { 
       extensions: [".jsx", ".js", ".json"] 
    }
   }, {
    test: /\.s?css$/,
    use: [ 'style-loader', 'css-loader', 'sass-loader' ]
   }, {
    test: /\.(png|jpg|gif)$/i,
    use: [{
       loader: 'url-loader',
       options: {
         limit: 8192
       }
    }]
  }]
 },
 devtool: 'cheap-module-eval-source-map',
 devServer: {
    contentBase: path.join(__dirname, 'public')
  }
 };`enter code here`

.babelrc file 

{
"presets": [
    "@babel/env",
    "@babel/preset-react"
],
"env": {
    "production": {
        "plugins": [
            ["emotion", { "hoist": true }]
        ]
    },
    "development": {
        "plugins": [
            ["emotion",
                { "sourceMap": true, "autoLabel": true }
            ],
            "transform-class-properties",
            "transform-react-jsx"
        ]
    }
}
}

package.json зависимости 

"dependencies": {
    "@babel/core": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "@material-ui/core": "^3.1.1",
    "@material-ui/icons": "^3.0.1",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.2",
    "babel-plugin-emotion": "^9.2.10",
    "babel-plugin-import-rename": "^1.0.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "css-loader": "^1.0.0",
    "emotion": "^9.2.10",
    "file-loader": "^2.0.0",
    "live-server": "^1.2.0",
    "node-sass": "^4.9.3",
    "normalize.css": "8.0.0",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-modal": "^3.5.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "url-loader": "^1.1.1",
    "validator": "^8.0.0",
    "webpack": "^4.20.0",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.9"
}

1 Ответ

0 голосов
/ 25 сентября 2018

Это решение работает для меня, я предоставляю эти файлы для справки.Надеюсь, это поможет.

1.файл webpack.config.js: 

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  mode:'development',
  devServer: {
    hot: true,
    port: 3000
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
         test:/\.(js|jsx)?$/,
        use: ['babel-loader']
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'React App',
      template: './public/index.html'
    })
  ]
};

2..babelrc файл: 

{
  "presets": ["env", "react", "stage-2"]
}

3.файл package.json: 

{
  "name": "demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --open"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.9.0",
    "react-hot-loader": "^4.3.3",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "webpack": "^4.15.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
    "prop-types": "^15.6.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "uuid": "^3.3.2"
  }
}
...