如何在Webpack 4中转换JSX

Question

我经历了this solution。我尝试将resolve对象放置在规则内部和外部规则中，但仍然出现相同的错误。

我也尝试过更新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文件

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

Answer 1

此解决方案对我有用，我提供了这些文件作为参考。希望它会有所帮助。

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

Answer 2

可能是你没有在 instruct 中添加 webpack 配置路径

改变你的 package.json

"scripts": {
    "start": "npx webpack-dev-server --config your webpackpath"
  },