webpack 错误

1 

ERROR in ./src/main.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):    
ReferenceError: document is not defined
    at Object.insertStyleElement (D:\front-end-interview\webpack\webpack5\advance\node_modules\style-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\css-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\postcss-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\src\main.css:257:17)
    at Object.domAPI (D:\front-end-interview\webpack\webpack5\advance\node_modules\style-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\css-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\postcss-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\src\main.css:175:30)
    at addElementStyle (D:\front-end-interview\webpack\webpack5\advance\node_modules\style-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\css-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\postcss-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\src\main.css:64:21)
    at modulesToDom (D:\front-end-interview\webpack\webpack5\advance\node_modules\style-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\css-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\postcss-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\src\main.css:48:21)
    at module.exports (D:\front-end-interview\webpack\webpack5\advance\node_modules\style-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\css-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\postcss-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\src\main.css:85:25)
    at D:\front-end-interview\webpack\webpack5\advance\node_modules\style-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\css-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\postcss-loader\di    at D:\front-end-interview\webpack\webpack5\advance\node_modules\style-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\css-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\postcss-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\src\main.css:629:2
    at Object.<anonymous> (D:\front-end-interview\webpack\webpack5\advance\node_modules\style-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\css-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\node_modules\postcss-loader\dist\cjs.js!D:\front-end-interview\webpack\webpack5\advance\src\main.css:631:12)
    at Module._compile (D:\front-end-interview\webpack\webpack5\advance\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
    at evalModuleCode (D:\front-end-interview\webpack\webpack5\advance\node_modules\mini-css-extract-plugin\dist\utils.js:41:10)
 @ ./src/index.js 9:0-20

webpack 5.44.0 compiled with 1 error in 3401 ms

删除style-loader，可以正常打包

2 

ERROR in ./src/main.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):    
Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-started
    at Object.pitch (D:\front-end-interview\webpack\webpack5\advance\node_modules\mini-css-extract-plugin\dist\loader.js:51:14)

这里我们对 mini-css-extract-plugin 进行一下降级处理: ^2.1.0 -> ^1.3.6

降了版本之后，还是报错，根据提示信息，我们给配置加上 publicPath: './'

output: {

    filename: 'bundle.js', // 输出文件名

    path: path.join(__dirname, 'dist'), // 输出文件目录

    publicPath: './'

  },

在尝试一次

3 

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree
原因：安装的包与已经存在的包有冲突。
解决办法：npm install xxx -- force或者npm install xxx --legacy-peer-deps来安装。