webpack-5 - 如何在 webpack 中使用 fallback : { 'path' : require. resolve ('path-browserify' )？

Question

我收到这个错误:

如果你想包含一个 polyfill，你需要: - 添加一个后备 'resolve.fallback: { "path": require.resolve("path-browserify") }' - 安装 'path-browserify ':

(base) raphy@pc:~/NEW-Raphy-Template$ yarn start
yarn run v1.22.18
$ yarn run build && ELECTRON_DISABLE_SECURITY_WARNINGS=true electron ./dist/main/main.js
$ npx webpack --config ./webpack.config.js
asset main.js 11.2 MiB [compared for emit] (name: main)
runtime modules 793 bytes 4 modules
javascript modules 8.33 MiB
  modules by path ./node_modules/ 8.26 MiB
    cacheable modules 8.26 MiB 1402 modules
    optional modules 3.24 KiB [optional] 3 modules
  modules by path ./src/ 74.6 KiB 18 modules
  + 28 modules
json modules 1.19 MiB
  modules by path ./node_modules/har-schema/lib/ 6.93 KiB 18 modules
  modules by path ./node_modules/cheerio/ 96.9 KiB 16 modules
  modules by path ./node_modules/@postlight/mercury-parser/ 261 KiB 9 modules
  modules by path ./node_modules/iconv-lite/ 86.7 KiB 8 modules
  modules by path ./node_modules/ajv/lib/ 5.58 KiB 3 modules
  modules by path ./node_modules/whatwg-encoding/lib/ 5.33 KiB 2 modules
  + 7 modules

WARNING in ./node_modules/jsdom/lib/jsdom/utils.js 186:21-40
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/jsdom/lib/jsdom/browser/Window.js 8:26-45
 @ ./node_modules/jsdom/lib/api.js 14:15-51
 @ ./node_modules/turndown/lib/turndown.es.js 527:16-38
 @ ./node_modules/@postlight/mercury-parser/dist/mercury.js 11:38-57
 @ ./src/main/main.ts 54:41-77

WARNING in ./node_modules/parse5/lib/index.js 55:23-49
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/jsdom/lib/jsdom/browser/domtohtml.js 2:15-32
 @ ./node_modules/jsdom/lib/api.js 15:22-61
 @ ./node_modules/turndown/lib/turndown.es.js 527:16-38
 @ ./node_modules/@postlight/mercury-parser/dist/mercury.js 11:38-57
 @ ./src/main/main.ts 54:41-77

2 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.72.1 compiled with 2 warnings in 23433 ms

assets by path assets/css/ 1.25 MiB
  assets by path assets/css/fonts/ 1.19 MiB 13 assets
  assets by path assets/css/*.css 45.9 KiB 9 assets
  assets by path assets/css/images/*.png 6.35 KiB
    asset assets/css/images/marker-icon-2x.png 2.41 KiB [compared for emit] [from: src/assets/css/images/marker-icon-2x.png] [copied]
    + 4 assets
  asset assets/css/App.scss 5.26 KiB [compared for emit] [from: src/assets/css/App.scss] [copied]
  asset assets/css/postcss/app.pcss 721 bytes [compared for emit] [from: src/assets/css/postcss/app.pcss] [copied]
assets by path *.js 5.66 MiB
  asset app.js 5.66 MiB [compared for emit] (name: app)
  asset style.js 2.72 KiB [compared for emit] (name: style)
assets by path *.css 79.3 KiB
  asset app.css 41.5 KiB [compared for emit] (name: app)
  asset style.css 37.8 KiB [compared for emit] (name: style)
asset index.html 617 bytes [compared for emit]
Entrypoint app 5.7 MiB = app.css 41.5 KiB app.js 5.66 MiB
Entrypoint style 40.5 KiB = style.css 37.8 KiB style.js 2.72 KiB
orphan modules 286 KiB [orphan] 159 modules
runtime modules 1.59 KiB 7 modules
modules by path ./node_modules/ 3.87 MiB (javascript) 18.3 KiB (css/mini-extract) 1599 modules
modules by path ./src/ 39.1 KiB (javascript) 41.5 KiB (css/mini-extract)
  javascript modules 39.1 KiB
    modules by path ./src/app/ 35.3 KiB 14 modules
    + 4 modules
  css modules 41.5 KiB
    modules by path ./src/app/sections/ 1.43 KiB 2 modules
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/app/styles/index.css 19.5 KiB [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/assets/css/global.css 19.7 KiB [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/app/components/Sidebar.css 940 bytes [built] [code generated]

ERROR in ./node_modules/file-url/index.js 2:13-28
Module not found: Error: Can't resolve 'path' in '/home/raphy/NEW-Raphy-Template/node_modules/file-url'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }
resolve 'path' in '/home/raphy/NEW-Raphy-Template/node_modules/file-url'
  Parsed request is a module
  using description file: /home/raphy/NEW-Raphy-Template/node_modules/file-url/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /home/raphy/NEW-Raphy-Template/node_modules/file-url/node_modules doesn't exist or is not a directory
      /home/raphy/NEW-Raphy-Template/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /home/raphy/NEW-Raphy-Template/node_modules
        single file module
          using description file: /home/raphy/NEW-Raphy-Template/package.json (relative path: ./node_modules/path)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path.jsx doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path.js doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path.tsx doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path.ts doesn't exist
        /home/raphy/NEW-Raphy-Template/node_modules/path doesn't exist
      looking for modules in /home/raphy/node_modules
        single file module
          No description file found in /home/raphy/node_modules or above
          no extension
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path doesn't exist
          .jsx
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path.jsx doesn't exist
          .js
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path.js doesn't exist
          .tsx
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path.tsx doesn't exist
          .ts
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path.ts doesn't exist
        /home/raphy/node_modules/path doesn't exist
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ./src/app/sections/infobasket/Infobasket.js 83:16-35
 @ ./src/app/components/App.tsx 18:41-85
 @ ./src/app/index.tsx 7:34-61

webpack 5.72.1 compiled with 1 error in 23411 ms

但是如果我在 resolve 中添加那些 fallback :

  // main process
var main_config = {
    mode: isEnvProduction ? 'production' : 'development',
    entry: './src/main/main.ts',
    target: 'electron-main',
    resolve: {
      fallback: { 'path': require.resolve('path-browserify') },
      extensions: ['.jsx', '.js', 'ts'],
    },

我得到了同样的错误:

(base) raphy@pc:~/NEW-Raphy-Template$ yarn start
    yarn run v1.22.18
$ yarn run build && ELECTRON_DISABLE_SECURITY_WARNINGS=true electron ./dist/main/main.js
$ npx webpack --config ./webpack.config.js
asset main.js 11.2 MiB [compared for emit] (name: main)
runtime modules 793 bytes 4 modules
javascript modules 8.33 MiB
  modules by path ./node_modules/ 8.26 MiB
    cacheable modules 8.26 MiB 1402 modules
    optional modules 3.24 KiB [optional] 3 modules
  modules by path ./src/ 74.6 KiB 18 modules
  + 28 modules
json modules 1.19 MiB
  modules by path ./node_modules/har-schema/lib/ 6.93 KiB 18 modules
  modules by path ./node_modules/cheerio/ 96.9 KiB 16 modules
  modules by path ./node_modules/@postlight/mercury-parser/ 261 KiB 9 modules
  modules by path ./node_modules/iconv-lite/ 86.7 KiB 8 modules
  modules by path ./node_modules/ajv/lib/ 5.58 KiB 3 modules
  modules by path ./node_modules/whatwg-encoding/lib/ 5.33 KiB 2 modules
  + 7 modules

WARNING in ./node_modules/jsdom/lib/jsdom/utils.js 186:21-40
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/jsdom/lib/jsdom/browser/Window.js 8:26-45
 @ ./node_modules/jsdom/lib/api.js 14:15-51
 @ ./node_modules/turndown/lib/turndown.es.js 527:16-38
 @ ./node_modules/@postlight/mercury-parser/dist/mercury.js 11:38-57
 @ ./src/main/main.ts 54:41-77

WARNING in ./node_modules/parse5/lib/index.js 55:23-49
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/jsdom/lib/jsdom/browser/domtohtml.js 2:15-32
 @ ./node_modules/jsdom/lib/api.js 15:22-61
 @ ./node_modules/turndown/lib/turndown.es.js 527:16-38
 @ ./node_modules/@postlight/mercury-parser/dist/mercury.js 11:38-57
 @ ./src/main/main.ts 54:41-77

2 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.72.1 compiled with 2 warnings in 23467 ms

assets by path assets/css/ 1.25 MiB
  assets by path assets/css/fonts/ 1.19 MiB 13 assets
  assets by path assets/css/*.css 45.9 KiB 9 assets
  assets by path assets/css/images/*.png 6.35 KiB
    asset assets/css/images/marker-icon-2x.png 2.41 KiB [compared for emit] [from: src/assets/css/images/marker-icon-2x.png] [copied]
    + 4 assets
  asset assets/css/App.scss 5.26 KiB [compared for emit] [from: src/assets/css/App.scss] [copied]
  asset assets/css/postcss/app.pcss 721 bytes [compared for emit] [from: src/assets/css/postcss/app.pcss] [copied]
assets by path *.js 5.66 MiB
  asset app.js 5.66 MiB [compared for emit] (name: app)
  asset style.js 2.72 KiB [compared for emit] (name: style)
assets by path *.css 79.3 KiB
  asset app.css 41.5 KiB [compared for emit] (name: app)
  asset style.css 37.8 KiB [compared for emit] (name: style)
asset index.html 617 bytes [compared for emit]
Entrypoint app 5.7 MiB = app.css 41.5 KiB app.js 5.66 MiB
Entrypoint style 40.5 KiB = style.css 37.8 KiB style.js 2.72 KiB
orphan modules 286 KiB [orphan] 159 modules
runtime modules 1.59 KiB 7 modules
modules by path ./node_modules/ 3.87 MiB (javascript) 18.3 KiB (css/mini-extract) 1599 modules
modules by path ./src/ 39.1 KiB (javascript) 41.5 KiB (css/mini-extract)
  javascript modules 39.1 KiB
    modules by path ./src/app/ 35.3 KiB 14 modules
    + 4 modules
  css modules 41.5 KiB
    modules by path ./src/app/sections/ 1.43 KiB 2 modules
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/app/styles/index.css 19.5 KiB [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/assets/css/global.css 19.7 KiB [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/app/components/Sidebar.css 940 bytes [built] [code generated]

ERROR in ./node_modules/file-url/index.js 2:13-28
Module not found: Error: Can't resolve 'path' in '/home/raphy/NEW-Raphy-Template/node_modules/file-url'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }
resolve 'path' in '/home/raphy/NEW-Raphy-Template/node_modules/file-url'
  Parsed request is a module
  using description file: /home/raphy/NEW-Raphy-Template/node_modules/file-url/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /home/raphy/NEW-Raphy-Template/node_modules/file-url/node_modules doesn't exist or is not a directory
      /home/raphy/NEW-Raphy-Template/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /home/raphy/NEW-Raphy-Template/node_modules
        single file module
          using description file: /home/raphy/NEW-Raphy-Template/package.json (relative path: ./node_modules/path)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path.jsx doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path.js doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path.tsx doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path.ts doesn't exist
        /home/raphy/NEW-Raphy-Template/node_modules/path doesn't exist
      looking for modules in /home/raphy/node_modules
        single file module
          No description file found in /home/raphy/node_modules or above
          no extension
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path doesn't exist
          .jsx
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path.jsx doesn't exist
          .js
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path.js doesn't exist
          .tsx
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path.tsx doesn't exist
          .ts
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path.ts doesn't exist
        /home/raphy/node_modules/path doesn't exist
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ./src/app/sections/infobasket/Infobasket.js 83:16-35
 @ ./src/app/components/App.tsx 18:41-85
 @ ./src/app/index.tsx 7:34-61

webpack 5.72.1 compiled with 1 error in 23445 ms
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.

那么....如何在webpack.config.js中正确解析？

Answer 1

已解决。

只是添加

    resolve: {
      fallback: { 'path': require.resolve('path-browserify') },
      extensions: ['.jsx', '.js', '.tsx', '.ts'],
   }

同样在webpack配置的renderer部分