Upgrade webpack (#4746)

* optimize code * optimize code * optimize code * optimize dependences * optimize code
2025-07-31 06:40:39 +00:00 · 2020-12-11 16:11:25 +08:00 · 2020-12-11 16:11:25 +08:00 · b22f90f2e8
commit b22f90f2e8
parent bc71331666
5 changed files with 923 additions and 526 deletions
--- a/frontend/config/webpack.config.dev.js
+++ b/frontend/config/webpack.config.dev.js
@ -10,8 +10,9 @@ const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeM
 const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getClientEnvironment = require('./env');
-const paths = require('./paths');
 const BundleTracker = require('webpack-bundle-tracker');
+const paths = require('./paths');
+const getEntries = require('./webpack.entry');

 // Webpack uses `publicPath` to determine where the app is being served from.
 // In development, we always serve from the root. This makes config easier.
@ -33,190 +34,7 @@ module.exports = {
  // These are the "entry points" to our application.
  // This means they will be the "root" imports that are included in JS bundle.
  // The first two entry points enable "hot" CSS and auto-refreshes for JS.
-  entry: {
-    markdownEditor: [
-      // We ship a few polyfills by default:
-      require.resolve('./polyfills'),
-      // Include an alternative client for WebpackDevServer. A client's job is to
-      // connect to WebpackDevServer by a socket and get notified about changes.
-      // When you save a file, the client will either apply hot updates (in case
-      // of CSS changes), or refresh the page (in case of JS changes). When you
-      // make a syntax error, this client will display a syntax error overlay.
-      // Note: instead of the default WebpackDevServer client, we use a custom one
-      // to bring better experience for Create React App users. You can replace
-      // the line below with these two lines if you prefer the stock client:
-      // require.resolve('webpack-dev-server/client') + '?/',
-      // require.resolve('webpack/hot/dev-server'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      // Finally, this is your app's code:
-      paths.appIndexJs,
-      // We include the app code last so that if there is a runtime error during
-      // initialization, it doesn't blow up the WebpackDevServer client, and
-      // changing JS code would still trigger a refresh.
-    ],
-    TCAccept: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/tc-accept.js",
-    ],
-    TCView: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/tc-view.js",
-    ],
-    userNotifications: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/user-notifications.js",
-    ],
-    wiki: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/wiki.js",
-    ],
-    fileHistory: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/file-history.js",
-    ],
-    fileHistoryOld: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/file-history-old.js",
-    ],
-    app: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/app.js",
-    ],
-    draft: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/draft.js",
-    ],
-    sharedDirView: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/shared-dir-view.js",
-    ],
-    sharedFileViewMarkdown: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/shared-file-view-markdown.js",
-    ],
-    sharedFileViewText: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/shared-file-view-text.js",
-    ],
-    sharedFileViewImage: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/shared-file-view-image.js",
-    ],
-    sharedFileViewVideo: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/shared-file-view-video.js",
-    ],
-    sharedFileViewPDF: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/shared-file-view-pdf.js",
-    ],
-    sharedFileViewSVG: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/shared-file-view-svg.js",
-    ],
-    sharedFileViewAudio: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/shared-file-view-audio.js",
-    ],
-    sharedFileViewDocument: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/shared-file-view-document.js",
-    ],
-    sharedFileViewSpreadsheet: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/shared-file-view-spreadsheet.js",
-    ],
-    sharedFileViewUnknown: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/shared-file-view-unknown.js",
-    ],
-    historyTrashFileView: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/history-trash-file-view.js",
-    ],
-    fileView: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/file-view.js",
-    ],
-    viewFileText: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/view-file-text.js",
-    ],
-    viewFileDocument: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/view-file-document.js",
-    ],
-    viewFileSpreadsheet: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/view-file-spreadsheet.js",
-    ],
-    settings: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/settings.js",
-    ],
-    repoHistory: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/repo-history.js",
-    ],
-    repoSnapshot: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/repo-snapshot.js",
-    ],
-    repoFolderTrash: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/repo-folder-trash.js",
-    ],
-    orgAdmin: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/pages/org-admin",
-    ],
-    sysAdmin: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/pages/sys-admin",
-    ],
-
-    search: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/pages/search",
-    ],
-    uploadLink: [
-      require.resolve('./polyfills'),
-      require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appSrc + "/pages/upload-link",
-    ]
-  },
-
+  entry: getEntries('development'),
  output: {
    // Add /* filename */ comments to generated require()s in the output.
    pathinfo: true,
@ -458,13 +276,7 @@ module.exports = {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
-    },
-
-    // watchOptions: {
-    //   aggregateTimeout: 1000,
-    //   poll: 5000,
-    //   ignored: paths.appNodeModules,
-    // },
+    }
  },

 };
--- a/frontend/config/webpack.config.prod.js
+++ b/frontend/config/webpack.config.prod.js
@ -28,6 +28,7 @@ const shouldUseSourceMap = false;
 const publicUrl = publicPath.slice(0, -1);
 // Get environment variables to inject into our app.
 const env = getClientEnvironment(publicUrl);
+const getEntries = require('./webpack.entry');

 // Assert this just to be safe.
 // Development builds of React are slow and not intended for production.
@ -57,41 +58,7 @@ module.exports = {
  // You can exclude the *.map files from the build during deployment.
  devtool: shouldUseSourceMap ? 'source-map' : false,
  // In production, we only want to load the polyfills and the app code.
-  entry: {
-    markdownEditor: [require.resolve('./polyfills'), paths.appIndexJs],
-    TCAccept: [require.resolve('./polyfills'), paths.appSrc + "/tc-accept.js"],
-    TCView: [require.resolve('./polyfills'), paths.appSrc + "/tc-view.js"],
-    userNotifications: [require.resolve('./polyfills'), paths.appSrc + "/user-notifications.js"],
-    wiki: [require.resolve('./polyfills'), paths.appSrc + "/wiki.js"],
-    fileHistory: [require.resolve('./polyfills'), paths.appSrc + "/file-history.js"],
-    fileHistoryOld: [require.resolve('./polyfills'), paths.appSrc + "/file-history-old.js"],
-    app: [require.resolve('./polyfills'), paths.appSrc + "/app.js"],
-    draft: [require.resolve('./polyfills'), paths.appSrc + "/draft.js"],
-    sharedDirView: [require.resolve('./polyfills'), paths.appSrc + "/shared-dir-view.js"],
-    sharedFileViewMarkdown: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-markdown.js"],
-    sharedFileViewText: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-text.js"],
-    sharedFileViewImage: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-image.js"],
-    sharedFileViewVideo: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-video.js"],
-    sharedFileViewPDF: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-pdf.js"],
-    sharedFileViewSVG: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-svg.js"],
-    sharedFileViewAudio: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-audio.js"],
-    sharedFileViewDocument: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-document.js"],
-    sharedFileViewSpreadsheet: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-spreadsheet.js"],
-    sharedFileViewUnknown: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-unknown.js"],
-    historyTrashFileView: [require.resolve('./polyfills'), paths.appSrc + "/history-trash-file-view.js"],
-    fileView: [require.resolve('./polyfills'), paths.appSrc + "/file-view.js"],
-    viewFileText: [require.resolve('./polyfills'), paths.appSrc + "/view-file-text.js"],
-    viewFileDocument: [require.resolve('./polyfills'), paths.appSrc + "/view-file-document.js"],
-    viewFileSpreadsheet: [require.resolve('./polyfills'), paths.appSrc + "/view-file-spreadsheet.js"],
-    settings: [require.resolve('./polyfills'), paths.appSrc + "/settings.js"],
-    repoHistory: [require.resolve('./polyfills'), paths.appSrc + "/repo-history.js"],
-    repoSnapshot: [require.resolve('./polyfills'), paths.appSrc + "/repo-snapshot.js"],
-    repoFolderTrash: [require.resolve('./polyfills'), paths.appSrc + "/repo-folder-trash.js"],
-    orgAdmin: [require.resolve('./polyfills'), paths.appSrc + "/pages/org-admin"],
-    sysAdmin: [require.resolve('./polyfills'), paths.appSrc + "/pages/sys-admin"],
-    search: [require.resolve('./polyfills'), paths.appSrc + "/pages/search"],
-    uploadLink: [require.resolve('./polyfills'), paths.appSrc + "/pages/upload-link"],
-  },
+  entry: getEntries('production'), 

  output: {
    // The build folder.
--- a/frontend/config/webpack.entry.js
+++ b/frontend/config/webpack.entry.js
@ -0,0 +1,54 @@
+const paths = require('./paths');
+
+const entryFiles = {
+  markdownEditor: "/index.js",
+  TCAccept: "/tc-accept.js",
+  TCView: "/tc-view.js",
+  userNotifications: "/user-notifications.js",
+  wiki: "/wiki.js",
+  fileHistory: "/file-history.js",
+  fileHistoryOld: "/file-history-old.js",
+  app: "/app.js",
+  draft: "/draft.js",
+  sharedDirView: "/shared-dir-view.js",
+  sharedFileViewMarkdown: "/shared-file-view-markdown.js",
+  sharedFileViewText: "/shared-file-view-text.js",
+  sharedFileViewImage: "/shared-file-view-image.js",
+  sharedFileViewVideo: "/shared-file-view-video.js",
+  sharedFileViewPDF: "/shared-file-view-pdf.js",
+  sharedFileViewSVG: "/shared-file-view-svg.js",
+  sharedFileViewAudio:  "/shared-file-view-audio.js",
+  sharedFileViewDocument: "/shared-file-view-document.js",
+  sharedFileViewSpreadsheet: "/shared-file-view-spreadsheet.js",
+  sharedFileViewUnknown: "/shared-file-view-unknown.js",
+  historyTrashFileView: "/history-trash-file-view.js",
+  fileView: "/file-view.js",
+  viewFileText: "/view-file-text.js",
+  viewFileDocument: "/view-file-document.js",
+  viewFileSpreadsheet: "/view-file-spreadsheet.js",
+  settings: "/settings.js",
+  repoHistory: "/repo-history.js",
+  repoSnapshot: "/repo-snapshot.js",
+  repoFolderTrash: "/repo-folder-trash.js",
+  orgAdmin: "/pages/org-admin",
+  sysAdmin: "/pages/sys-admin",
+  search: "/pages/search",
+  uploadLink: "/pages/upload-link",
+};
+
+const getEntries = (mode) => {
+  let entries = {};
+  Object.keys(entryFiles).forEach(key => {
+    let entry = [];
+    entry.push(require.resolve('./polyfills'));
+    if (mode === 'development') {
+      entry.push(require.resolve('react-dev-utils/webpackHotDevClient'));
+    }
+    entry.push(paths.appSrc + entryFiles[key]);
+
+    entries[key] = entry;
+  });
+  return entries;
+};
+
+module.exports = getEntries;
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -9,27 +9,18 @@
    "@seafile/seafile-calendar": "0.0.12",
    "@seafile/seafile-editor": "0.3.26",
    "MD5": "^1.3.0",
-    "autoprefixer": "7.1.6",
-    "chart.js": "^2.9.1",
+    "chart.js": "2.9.4",
    "classnames": "^2.2.6",
    "copy-to-clipboard": "^3.0.8",
-    "css-loader": "0.28.7",
    "dotenv": "4.0.0",
    "dotenv-expand": "4.2.0",
-    "faker": "^4.1.0",
-    "file-loader": "1.1.5",
    "glamor": "^2.20.40",
-    "html-webpack-plugin": "2.29.0",
    "i18next": "^17.0.13",
    "i18next-browser-languagedetector": "^3.0.3",
    "i18next-xhr-backend": "^3.1.2",
-    "immutability-helper": "^3.0.0",
-    "jest": "20.0.4",
    "merge": "^1.2.1",
    "moment": "^2.22.2",
    "object-assign": "4.1.1",
-    "postcss-flexbugs-fixes": "3.2.0",
-    "postcss-loader": "2.0.8",
    "prismjs": "^1.15.0",
    "prop-types": "^15.6.2",
    "raf": "3.4.0",
@ -46,9 +37,7 @@
    "reactstrap": "^6.4.0",
    "seafile-js": "0.2.162",
    "socket.io-client": "^2.2.0",
-    "sw-precache-webpack-plugin": "0.11.4",
    "unified": "^7.0.0",
-    "url-loader": "0.6.2",
    "url-parse": "^1.4.3",
    "vfile": "^3.0.0",
    "video.js": "^7.4.1",
@ -104,6 +93,7 @@
    "extends": "react-app"
  },
  "devDependencies": {
+    "autoprefixer": "7.1.6",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "7.2.3",
@ -115,6 +105,7 @@
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-0": "^6.24.1",
    "case-sensitive-paths-webpack-plugin": "2.1.1",
+    "css-loader": "0.28.7",
    "eslint": "4.10.0",
    "eslint-config-react-app": "^2.1.0",
    "eslint-loader": "1.9.0",
@ -123,10 +114,17 @@
    "eslint-plugin-jsx-a11y": "5.1.1",
    "eslint-plugin-react": "7.4.0",
    "extract-text-webpack-plugin": "3.0.2",
+    "file-loader": "1.1.5",
    "fs-extra": "^9.0.1",
+    "html-webpack-plugin": "2.29.0",
+    "jest": "20.0.4",
+    "postcss-flexbugs-fixes": "3.2.0",
+    "postcss-loader": "2.0.8",
    "react-app-polyfill": "^1.0.1",
    "react-dev-utils": "^5.0.0",
    "style-loader": "^0.19.0",
+    "sw-precache-webpack-plugin": "0.11.4",
+    "url-loader": "0.6.2",
    "webpack": "3.8.1",
    "webpack-bundle-tracker": "^0.4.2-beta",
    "webpack-dev-server": "2.9.4",