in the process of upgrading the project webpack, I encountered a problem, that is, when I packaged it to the end, I would report an error:

I always feel that the first mistake is caused by some low-level mistake, but I don"t know what went wrong. The package.json file should be written normally:

{
  "name": "mercury",
  "version": "4.5.0",
  "scripts": {
    "buildlib": "yarn buildlib:prod",
    "buildlib:debug": "NODE_ENV=debug webpack --config webpack.dll.config.js",
    "buildlib:prod": "NODE_ENV=production webpack --config webpack.dll.config.js",
    "prestart": "cp -rv src/vendors/* dist/",
    "start": "cp deploy/env/dev/config.env.js src/scripts/common/config.env.js && webpack-dev-server --inline --progress",
    "build": "yarn build:prod",
    "build:debug": "COMMIT_ID=$(git rev-parse --short HEAD) NODE_ENV=debug webpack --progress --profile --colors",
    "build:prod": "COMMIT_ID=$(git rev-parse --short HEAD) NODE_ENV=production webpack --progress --profile --colors",
    "config": "yarn config:production",
    "config:development": "NODE_ENV=development node bin/get_config.js",
    "config:production": "NODE_ENV=production node bin/get_config.js",
    "upload": "node bin/upload_oss.js",
    "debug": "yarn buildlib:debug && yarn build:debug && yarn prestart && mkdir -p public && cp -R dist/* public/",
    "lint:git": "eslint `git diff-index --name-only HEAD | grep -E ".(js|jsx)$"`",
    "lint": "eslint --ext .js --ext .jsx .",
    "lint:fix": "eslint --fix --ext .js --ext .jsx .",
    "precommit": "npm run lint:git",
    "inspect": "jsinspect ./src/scripts",
    "commitmsg": "commit-message-validator"
  },
  "config": {
    "commit-message-validator": {
      "pattern": [
        "^\\s*refs\\s+-sharpSMART-\\d+\\s+.+$"
      ]
    }
  },
  "devDependencies": {
    "add-asset-html-webpack-plugin": "^2.0.1",
    "aliyun-sdk": "^1.11.2",
    "babel-core": "^6.1.2",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-antd": "^0.4.0",
    "babel-plugin-import": "^1.2.1",
    "babel-plugin-transform-runtime": "^6.4.3",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.1.2",
    "babel-preset-react": "^6.1.2",
    "babel-preset-stage-0": "^6.5.0",
    "babel-runtime": "^6.3.19",
    "commit-message-validator": "^0.1.6",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^2.0.1",
    "css-loader": "^0.28.11",
    "eslint": "^4.18.1",
    "eslint-config-standard": "^11.0.0",
    "eslint-import-resolver-webpack": "^0.8.1",
    "eslint-plugin-import": "^2.9.0",
    "eslint-plugin-jsx-a11y": "^5.0.1",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.6.0",
    "eslint-plugin-react": "^6.10.3",
    "eslint-plugin-standard": "^3.0.1",
    "extract-text-webpack-plugin": "next",
    "file-loader": "^1.1.11",
    "happypack": "next",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^3.2.0",
    "husky": "^0.13.3",
    "jsinspect": "^0.12.7",
    "json-loader": "^0.5.7",
    "merge-stream": "^1.0.0",
    "mime": "^2.2.0",
    "node-sass": "^3.4.1",
    "react-hot-loader": "^1.3.1",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.20.3",
    "url-loader": "^1.0.1",
    "walkdir": "^0.0.12",
    "webpack": "4",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "3.1.1"
  },
  "dependencies": {
    "antd": "2.11.0",
    "autosize": "^3.0.20",
    "better-scroll": "^1.8.1",
    "fast-uglifyjs-plugin": "^0.3.0",
    "fingerprintjs2": "^1.6.1",
    "font-awesome": "^4.4.0",
    "history": "^2.1.2",
    "lodash.chunk": "^4.2.0",
    "lodash.clonedeep": "^4.5.0",
    "lodash.merge": "^4.6.0",
    "mini-css-extract-plugin": "^0.4.0",
    "moment-timezone": "^0.5.14",
    "node-uuid": "^1.4.7",
    "raven-js": "^3.21.0",
    "react": "^15.6.1",
    "react-dipper": "^0.1.3",
    "react-dom": "^15.6.1",
    "react-id-swiper": "^1.5.8",
    "react-iframe": "^1.1.0",
    "react-mixin": "^3.0.3",
    "react-redux": "^4.0.0",
    "react-refetch": "^1.0.0-beta.10",
    "react-router": "^2.6.0",
    "redux": "^3.0.4",
    "redux-thunk": "^1.0.0",
    "socket.io": "^2.0.4",
    "store": "^1.3.17",
    "underscore": "^1.8.3",
    "webpack-sentry-plugin": "^1.14.1",
    "whatwg-fetch": "^2.0.1"
  }
}

webpack.config.js goes like this:

var path = require("path");
var fs = require("fs");
var webpack = require("webpack");
var ExtractTextWebapckPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var AddAssetHtmlPlugin = require("add-asset-html-webpack-plugin");
var CopyWebpackPlugin = require("copy-webpack-plugin");
var FastUglifyJsPlugin = require("fast-uglifyjs-plugin");
var SentryPlugin = require("webpack-sentry-plugin");
var LibManifestJson = require("./lib-manifest.json");
var sassExtract = new ExtractTextWebapckPlugin("css/sass.css");

const isDebug = process.env.NODE_ENV === "debug";
const isProduct = isDebug || process.env.NODE_ENV === "production";
var HappyPack = require("happypack");
var happyThreadPool = HappyPack.ThreadPool({ size: isProduct ? 3 : 1 });

let publicPath = "/";
if (fs.existsSync("./config.local.js")) {
  const consulConfig = require("./config.local");
  publicPath = `${consulConfig.cdn.static}/apollon/assets/`;
}

var entry = {
  app: ["whatwg-fetch", "./src/scripts/index.js"],
};

if (!isProduct) {
  entry.app.push("webpack/hot/only-dev-server");
}

var config = {
  devtool: "-sharpeval-source-map",
  mode: "development",
  entry,
  output: {
    path: path.resolve(__dirname, "./dist"),
    publicPath,
    filename: "js/[name].js",
  },
  resolve: {
    modules: [
      path.resolve("./src/scripts"),
      path.resolve("./src"),
      "node_modules",
    ],
    extensions: ["*", ".js", ".scss", ".css", ".json"],
    alias: {
      containers: path.resolve(__dirname, "./src/scripts/containers"),
      components: path.resolve(__dirname, "./src/scripts/components"),
    },
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        loader: "html-loader",
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "happypack/loader?id=happybabel",
      },
      {
        test: /\.json$/,
        exclude: /node_modules/,
        loader: "json-loader",
      },
      {
        test: /\.css$/,
        use: ExtractTextWebapckPlugin.extract({
          use: "css-loader"
        })
      },
      {
        test: /\.scss$/,
        use: sassExtract.extract({ use: ["css-loader", "sass-loader"] })
      },
      {
        test: /\.(otf|eot|svg|ttf|woff2?)(\?.*)?$/,
        loader: "url-loader",
        query: {
          limit: 10000,
          name: "fonts/[name].[hash:7].[ext]",
        },
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: "url-loader",
        query: {
          limit: 15000,
          name: "images/[name].[hash:7].[ext]",
        },
      },
    ],
  },

  plugins: [
    new CopyWebpackPlugin([
      { from: "src/images", to: "images" },
    ]),
    new HappyPack({
      id: "happybabel",
      loaders: ["babel-loader"],
      threadPool: happyThreadPool,
      verbose: true,
    }),
  ],
};

if (isProduct) {
  config.devtool = isDebug ? "source-map" : "(none)";
  config.mode = "production";
  config.output = Object.assign({}, config.output, {
    filename: "js/[name].[chunkhash].js",
    chunkFilename: "[id].[chunkhash].js",
  });
  config.plugins = (config.plugins || []).concat([
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: ""production"",
      },
    }),
    new FastUglifyJsPlugin({
      compress: {
        warnings: false,
        drop_console: true,
      },
      debug: true,
      workerNum: 1,
      sourceMap: isDebug,
    }),
    new ExtractTextWebapckPlugin({ filename: "css/[name].[contenthash].css", allChunks: true }),
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: LibManifestJson,
    }),
    new HtmlWebpackPlugin({
      filename: path.resolve(__dirname, "./dist/index.html"),
      favicon: "./src/images/favicon.ico",
      template: "index.html",
      inject: "body",
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: "dependency",
    }),
    new AddAssetHtmlPlugin({ filepath: require.resolve("./src/vendors/lib.dll.js"), includeSourcemap: false, hash: true, publicPath }),
    new SentryPlugin({
      organization: "sentry",
      project: "apollon-frontend",
      apiKey: "ba56369e62fc4c22a71b3e8e8157cf86ab8b689cc7174aa68cf9b9c5f85d6b3f",
      // include: /\.js$/,
      include: /bundle-.*\.js.*/,
      release: process.env.COMMIT_ID,
      baseSentryURL: "https://sentry.smartstudy.com/api/0",
    }),
  ]);
} else {
  var proxyHost = require("./src/scripts/common/config.js").webpackProxyHost;

  config.devServer = {
    contentBase: path.resolve(__dirname, "./dist"),
    port: 3456,
    host: "0.0.0.0",
    hot: true,
    stats: {
      children: false,
    },
    disableHostCheck: true,
    historyApiFallback: true,
    noInfo: true,
    proxy: [
      {
        context: ["/api/**"],
        target: proxyHost,
        changeOrigin: true,
      },
    ],
  };

  config.plugins = (config.plugins || []).concat([
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: ""development"",
      },
    }),
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: LibManifestJson,
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new ExtractTextWebapckPlugin({ filename: "css/[name].css", allChunks: true }),
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "index.html",
      favicon: path.resolve(__dirname, "./src/images/favicon.ico"),
      inject: "body",
    }),
    new AddAssetHtmlPlugin({ filepath: require.resolve("./src/vendors/lib.dll.js"), includeSourcemap: false, hash: true }),
  ]);
}

process.traceDeprecation = true;

module.exports = config;

Please help everyone to check out the possible problems. Thank you on your knees.