如何修复解析 webpack 错误？

Question

我在 webpack 中遇到问题，我尝试使用 ant design ...但是当应用程序运行时...错误如下，请帮助我谢谢 you.I 已尝试搜索 Google 但还没找到正确答案

这个文件webpack.config.js

const path = require("path");

module.exports = {
  entry: { main: "./src/index.js" },
  mode: "development", // "production" | "development" | "none"
  output: {
    path: path.resolve(__dirname, "./wwwroot/dist"), // string
    // the target directory for all output files
    // must be an absolute path (use the Node.js path module)
    filename: "bundle.js", // the filename template for entry chunks
    publicPath: "dist/" // string    // the url to the output directory resolved relative to the HTML page
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            plugins: ["react-hot-loader/babel"]
          }
        }
      },

      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader"
        ]
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/,
        loader: "url-loader?limit=100000"
      }
    ]
  }
};

这个文件.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
      ["import", { "libraryName": "antd"}],
    "@babel/proposal-object-rest-spread",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-syntax-dynamic-import",
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

这个文件package.json

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "react + dotnet core + webpack + openidconnect",
  "main": "app.js",
  "scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "narbe hs",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-class-properties": "^7.2.3",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "aspnet-webpack": "^3.0.0",
    "aspnet-webpack-react": "^4.0.0",
    "babel-loader": "^8.0.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "webpack": "^4.28.3",
    "webpack-cli": "^3.1.2",
    "webpack-dev-middleware": "^3.5.0",
    "webpack-hot-middleware": "^2.24.3",
    "style-loader": "^0.23.1",
    "css-loader": "^2.1.0"
  },
  "dependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/runtime": "^7.2.0",
    "antd": "^3.25.1",
    "axios": "^0.19.0",
    "babel-plugin-import": "^1.12.2",
    "es6-promise": "^4.2.5",
    "file-loader": "^4.2.0",
    "formik": "^2.0.3",
    "html-webpack-plugin": "^3.2.0",
    "jwt-decode": "^2.2.0",
    "node-sass": "^4.13.0",
    "react-hot-loader": "^4.6.3",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "redux": "^4.0.0",
    "redux-form": "^7.4.2",
    "redux-thunk": "^2.3.0",
    "sass": "^1.23.3",
    "sass-loader": "^8.0.0",
    "url-loader": "^2.2.0",
    "yup": "^0.27.0"
  }
}

如何解决上面的图片错误？我的 webpack 有什么问题？

Answer 1

看起来你的正则表达式 /\.s[ac]ss$/i 只捕获 scss 和 sass 扩展。请看一下这个：https://webpack.js.org/guides/asset-management/#loading-css 为 css 文件添加规则。如果您想在同一规则中捕获 scss、sass 和 css，请使用此 /(\.css|\.scss|\.sass)$/

如何修复解析 webpack 错误？

how to fix resolving webpack errors?

reactjs

reactjs.net