您可能需要适当的加载程序来处理此文件类型。 <浏览器路由器>

时间:2019-01-16 11:57:59

标签: reactjs webpack

我正在使用Webpack进行响应,并且出现类似“您可能需要适当的加载器来处理此文件类型”之类的错误。指针位于index.js文件中。 我所做的所有配置都来自不同的站点。 我做了很多研究,但没有找到任何解决方案。以下是我的

这是我在启动npm run build之后得到的。 哈希:6e44e1d4943de3ad0fbc 版本:webpack 4.19.1 时间:159ms 建立于:01/16/2019 5:10:14 PM  1项资产 入口点main = main.js [0] ./src/index.js 231字节{0} [构建] [失败] [1错误]

ERROR in ./src/index.js 20:2
Module parse failed: Unexpected token (20:2)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
>   <BrowserRouter>
|     <Switch>
|       {/* redirection path */}

webpack.config.js文件代码:

const HTMLWebPackPlugin = require("html-webpack-plugin");
            const path = require("path");   
            module.export = {
              entry: "src/index.js",
              output: {
                path: path.resolve(__dirname, "dist"),
                filename: "gem-webpack.bundle.js"
              },

              module: {
                rules: [
                  {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    // include: __dirname + "/app/",
                    loader: "babel-loader",
                    query: {
                      presets: [
                        "@babel/preset-env",
                        "@babel/preset-react",
                        "es2015 ",
                        "stage-0",
                        "transpile jsx"
                      ]
                    }
                  },
                  {
                    test: /\.(.css)$/,
                    use: [
                      { loader: "style-loader" },
                      {
                        loader: "css-loader",
                        options: {
                          modules: true
                        }
                      },
                      {
                        loader: "sass-loader"
                      }
                    ]
                  },
                  {
                    test: /\.(.html)$/,
                    use: [
                      {
                        loader: "html-loader"
                      }
                    ]
                  },
                  {
                    test: /\.(jpe?g|png|gif|svg|ico)$/i,
                    use: [
                      {
                        loader: "file-loader",
                        options: {
                          outputPath: "assets/"
                        }
                      }
                    ]
                  }
                ]
              },

              plugin: [
                new HTMLWebPackPlugin({
                  template: "public/index.html",
                  filename: "./index.html"
                })
              ]
            };


    This is my .babelrc :

    {
      "presets": [
        "@babel/preset-env",
        "@babel/preset-react",
        "es2015",
        "transpile jsx",
        "stage-0"
      ]
    }

.npmrc的代码:

 save-exact=true

Package.json文件:

{
  "name": "gemplex_ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "babel-preset-es2015": "6.24.1",
    "bootstrap": "^4.2.1",
    "hamburgers": "^1.1.3",
    "jquery": "^3.3.1",
    "jquery.js": "0.0.2-security",
    "popper.js": "^1.14.6",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-fa": "^5.0.0",
    "react-owl-carousel2": "^0.3.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.2",
    "video.js": "^7.4.1",
    "videojs-playlist": "^4.2.6"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "webpack --mode production",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "webpbuild": "webpack --mode production"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/core": "7.2.2",
    "@babel/preset-env": "7.2.3",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "8.0.5",
    "css-loader": "^2.1.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "react-alice-carousel": "^1.13.0",
    "webpack": "4.19.1",
    "webpack-cli": "3.2.1",
    "webpack-dev-server": "3.1.14"
  }
}

谢谢。

0 个答案:

没有答案