Javascript 如何在Webpack4中传输JSX

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

我也尝试过更新npm并重新安装它以防万一，但运气不好

目录结构： 因为我使用的是

babel loader

，所以我导入了我的

jsx

文件，如下所示

从“/Card/Card”导入卡片

我也尝试过使用“.jsx”导入，但仍然会遇到同样的错误，即无法解决

运行Web包后出现错误消息：
webpack.config.js文件：
.LRC文件
package.json依赖项
这个解决方案适合我，我提供这些文件作为参考。希望能有帮助

1。
webpack.config.js
文件：


const path=require（'path'）；
const CleanWebpackPlugin=require（'clean-webpack-plugin'）；
const HtmlWebpackPlugin=require（'html-webpack-plugin'）；
module.exports={
条目：{
main:“./src/index.js”
},
输出：{
path:path.resolve（uu dirname，'dist'），
文件名：'[name].js'
},
模式:"发展",，
开发服务器：{
热：是的，
港口：3000
},
模块：{
规则：[
{
测试：/\.scss$/,，
用法：['style-loader'，'css-loader'，'sass-loader']
},
{
测试：/\（js|jsx）？$/，
用法：['babel-loader']
}
]
},
插件：[
新的CleanWebPackagePlugin（['dist']），
新HtmlWebpackPlugin({
标题：“React应用程序”，
模板：'./public/index.html'
})
]
};可能是因为您没有在指令中添加您的网页配置路径

更改您的package.json

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

resolve属性不应位于
模块内。规则[0]
。
 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

 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`

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

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

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