webpack配置插件new HtmlWebpackPlugin()后报一大堆错


WARNING in ./node_modules/html-webpack-plugin/index.js 134:15-22
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted    
 @ ./webpack.config.js 2:26-56

1 warning has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

ERROR in ./node_modules/clean-css/lib/options/format.js 1:22-39
Module not found: Error: Can't resolve 'os' in 'E:\works\webpack-test\node_modules\clean-css\lib\options'      

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: { "os": require.resolve("os-browserify/browser") }'
        - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "os": false }
 @ ./node_modules/clean-css/lib/clean.js 13:17-55
 @ ./node_modules/clean-css/index.js 1:0-39
 @ ./node_modules/html-webpack-plugin/node_modules/html-minifier-terser/src/htmlminifier.js 3:15-35
 @ ./node_modules/html-webpack-plugin/index.js 1103:13-51
 @ ./webpack.config.js 2:26-56

ERROR in ./node_modules/clean-css/lib/reader/apply-source-maps.js 1:9-22
Module not found: Error: Can't resolve 'fs' in 'E:\works\webpack-test\node_modules\clean-css\lib\reader'       
 @ ./node_modules/clean-css/lib/reader/read-sources.js 4:22-52
 @ ./node_modules/clean-css/lib/clean.js 24:18-50
 @ ./node_modules/clean-css/index.js 1:0-39
 @ ./node_modules/html-webpack-plugin/node_modules/html-minifier-terser/src/htmlminifier.js 3:15-35
 @ ./node_modules/html-webpack-plugin/index.js 1103:13-51
 @ ./webpack.config.js 2:26-56

ERROR in ./node_modules/clean-css/lib/reader/load-original-sources.js 1:9-22
Module not found: Error: Can't resolve 'fs' in 'E:\works\webpack-test\node_modules\clean-css\lib\reader'       
 @ ./node_modules/clean-css/lib/reader/read-sources.js 7:26-60
 @ ./node_modules/clean-css/lib/clean.js 24:18-50
 @ ./node_modules/clean-css/index.js 1:0-39
 @ ./node_modules/html-webpack-plugin/node_modules/html-minifier-terser/src/htmlminifier.js 3:15-35
 @ ./node_modules/html-webpack-plugin/index.js 1103:13-51
 @ ./webpack.config.js 2:26-56

ERROR in ./node_modules/clean-css/lib/reader/load-remote-resource.js 1:11-26
Module not found: Error: Can't resolve 'http' in 'E:\works\webpack-test\node_modules\clean-css\lib\reader'     

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: { "http": require.resolve("stream-http") }'
        - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "http": false }
 @ ./node_modules/clean-css/lib/options/fetch.js 1:25-66
 @ ./node_modules/clean-css/lib/clean.js 12:16-42
 @ ./node_modules/clean-css/index.js 1:0-39
 @ ./node_modules/html-webpack-plugin/node_modules/html-minifier-terser/src/htmlminifier.js 3:15-35
 @ ./node_modules/html-webpack-plugin/index.js 1103:13-51
 @ ./webpack.config.js 2:26-56

ERROR in ./node_modules/clean-css/lib/reader/load-remote-resource.js 2:12-28
Module not found: Error: Can't resolve 'https' in 'E:\works\webpack-test\node_modules\clean-css\lib\reader'    

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: { "https": require.resolve("https-browserify") }'
        - install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "https": false }
 @ ./node_modules/clean-css/lib/options/fetch.js 1:25-66
 @ ./node_modules/clean-css/lib/clean.js 12:16-42
 @ ./node_modules/clean-css/index.js 1:0-39
 @ ./node_modules/html-webpack-plugin/node_modules/html-minifier-terser/src/htmlminifier.js 3:15-35
 @ ./node_modules/html-webpack-plugin/index.js 1103:13-51
 @ ./webpack.config.js 2:26-56

ERROR in ./node_modules/clean-css/lib/reader/read-sources.js 1:9-22
Module not found: Error: Can't resolve 'fs' in 'E:\works\webpack-test\node_modules\clean-css\lib\reader'       
 @ ./node_modules/clean-css/lib/clean.js 24:18-50
 @ ./node_modules/clean-css/index.js 1:0-39
 @ ./node_modules/html-webpack-plugin/node_modules/html-minifier-terser/src/htmlminifier.js 3:15-35
 @ ./node_modules/html-webpack-plugin/index.js 1103:13-51
 @ ./webpack.config.js 2:26-56

ERROR in ./node_modules/html-webpack-plugin/index.js 13:11-24
Module not found: Error: Can't resolve 'vm' in 'E:\works\webpack-test\node_modules\html-webpack-plugin'        

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: { "vm": require.resolve("vm-browserify") }'
        - install 'vm-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "vm": false }
 @ ./webpack.config.js 2:26-56

ERROR in ./node_modules/html-webpack-plugin/index.js 14:11-24
Module not found: Error: Can't resolve 'fs' in 'E:\works\webpack-test\node_modules\html-webpack-plugin'        
 @ ./webpack.config.js 2:26-56

ERROR in ./node_modules/html-webpack-plugin/index.js 24:19-37
Module not found: Error: Can't resolve 'console' in 'E:\works\webpack-test\node_modules\html-webpack-plugin'

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: { "console": require.resolve("console-browserify") }'
        - install 'console-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "console": false }
 @ ./webpack.config.js 2:26-56

ERROR in ./node_modules/renderkid/lib/tools.js 84:10-24
Module not found: Error: Can't resolve 'tty' in 'E:\works\webpack-test\node_modules\renderkid\lib'

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: { "tty": require.resolve("tty-browserify") }'
        - install 'tty-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "tty": false }
 @ ./node_modules/renderkid/lib/RenderKid.js 15:15-33 21:8-26 23:16-42
 @ ./node_modules/pretty-error/lib/PrettyError.js 14:12-32
 @ ./node_modules/html-webpack-plugin/lib/errors.js 9:24-47
 @ ./node_modules/html-webpack-plugin/index.js 21:20-46
 @ ./webpack.config.js 2:26-56

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

webpack 5.88.2 compiled with 10 errors and 1 warning in 2996 ms
const HtmlWebpackPlugin = require("html-webpack-plugin");

解决:target: "node",即可设置后webpack将会在node.js环境进行编译,才能读取引入的 require

module.exports = {
  // target 设置为 node,webpack 将在类 Node.js 环境编译代码,使用 Node.js 的 require 加载 chunk,而不加载任何内置模块,如 fs 或 path。
  target: "node",
....
}

你可能感兴趣的:(webpack,前端,node.js)