Question

我们当前具有以下webpack v.4配置，但是在周末之后，由于某种原因，我们将收到以下错误：

Uncaught ReferenceError: require is not defined

有趣的是，过去两周我们没有更改webpack和package.json，现在，我们最新的jenkins构建完全失败了。我在本地运行，一切正常，然后我从git进行了干净的复制，现在也失败了。

我们的webpack配置：

const path = require("path");
const webpack = require("webpack");
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: ["babel-polyfill", "./src/index.js"],
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
    chunkFilename: "[name].chunk.js",
    publicPath: "/"
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      {
        test: /\.s?css$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          }
        ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[path][name].[hash].[ext]"
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      inject: false,
      template: "./public/index.html",
      filename: "./index.html"
    }),
    new webpack.ProvidePlugin({
      Promise:
        "imports-loader?this=>global!exports-loader?global.Promise!es6-promise",
      fetch:
        "imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch"
    }),
    new webpack.DefinePlugin({
      process: {
        env: {
          BACKEND_URL: JSON.stringify(process.env.BACKEND_URL || "http://localhost:8092")
        }
      }
    })
  ],
  resolve: {
    alias: {
      Utils: path.resolve(__dirname, 'src/admin/utils')
    }
  },
  devtool: "cheap-module-eval-source-map",
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    historyApiFallback: true
  }
};

我们的package.json

scripts": {
    "serve": "live-server public/",
    "build": "webpack -p --progress",
    "build:prod": "webpack -p --progress --config=webpack.prod.config.js",
    "dev-server": "webpack-dev-server --port 3000",
    "stats": "webpack --json > stats.json",
    "test": "jest --config=jest.config.json"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "6.26.3",
    "babel-loader": "7.1.5",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-react-jsx-source": "^6.22.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "webpack": "4.12.0",
    "webpack-cli": "^3.0.4",
    "webpack-dev-server": "3.1.5"
  },
  "dependencies": {
    "@babel/runtime": "7.0.0-beta.55",
    "apollo-cache-inmemory": "^1.2.7",
    "apollo-cache-persist": "^0.1.1",
    "apollo-client": "^2.3.8",
    "apollo-link-error": "^1.1.0",
    "apollo-link-http": "^1.5.4",
    "apollo-link-state": "^0.4.1",
    "axios": "^0.18.0",
    "axios-progress-bar": "^1.1.8",
    "classname": "^0.0.0",
    "css-loader": "^0.28.11",
    "dotenv": "^6.0.0",
    "enzyme": "^3.5.0",
    "enzyme-adapter-react-16": "^1.3.0",
    "es6-promise": "^4.2.4",
    "exports-loader": "^0.7.0",
    "express": "^4.16.3",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.11",
    "formik": "^1.0.3",
    "graphql": "^0.13.2",
    "graphql-tag": "^2.9.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "imports-loader": "^0.8.0",
    "jest": "^23.5.0",
    "live-server": "^1.2.0",
    "lodash": "^4.17.10",
    "moment": "^2.22.1",
    "node-sass": "^4.9.3",
    "npm": "^5.7.1",
    "raf": "^3.4.0",
    "react": "^16.4.2",
    "react-apollo": "^2.1.11",
    "react-datepicker": "^1.6.0",
    "react-dom": "^16.4.2",
    "react-dropzone": "^4.2.9",
    "react-helmet": "^5.2.0",
    "react-loadable": "^5.4.0",
    "react-router-dom": "^4.2.2",
    "react-scrollchor": "^5.1.0",
    "react-select": "^1.2.1",
    "react-sortable-tree": "^2.2.0",
    "react-stomp": "^3.2.0",
    "react-to-print": "^2.0.0-alpha-2",
    "react-transition-group": "1.x",
    "sass-loader": "^6.0.7",
    "semantic-ui-css": "^2.3.3",
    "semantic-ui-react": "^0.82.2",
    "style-loader": "^0.20.3",
    "sweetalert2": "^7.26.11",
    "uglifyjs-webpack-plugin": "^1.2.5",
    "universal-cookie": "^3.0.4",
    "uuid": "^3.2.1",
    "validator": "^9.4.1",
    "webpack-merge": "^4.1.4",
    "whatwg-fetch": "^2.0.4",
    "yup": "^0.25.1"
  }

Answer 1

找到答案，看到错误源自graphql.mjs（是什么），我在Webpack中添加了以下内容：

{
     test: /\.mjs$/,
     include: /node_modules/,
     type: "javascript/auto",
},

奇怪的是，我们还没有更新配置或package.json中的任何内容

未使用webpack和yarn定义需求

1 个答案: