10-22 10:51 阅读 254

webpack 5 项目中遇到的坑（持续更新）

前言

前段时间用 webpack 5搭建了一个 React、typescript 的脚手架，来作为公司项目的基础脚手架，在实际的使用中还是遇到了很多坑的，需要总结和记录一下。

我是这样搭建React+TS的通用webpack脚手架的（阶段一）

我是这样搭建React+TS的通用webpack脚手架的（阶段二）

1、BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.

错误信息

x#### 解决方案在 webpack.base.config.js中加上

module.exports = {
    resolve: {
	alias: {
	  crypto: false,
	  stream: false,
	  assert: false,
	  http: false,
	  https: false
	}
    }
}
// 具体加哪个，根据报错信息判断复制代码

2、Can't resolve 'react/jsx-runtime' in './node_modules/xxx'

错误信息

Can't resolve 'react/jsx-runtime' in './node_modules/xxx'复制代码

解决方案

在 webpack.base.config.js中加上

module.exports = {
    resolve: {
	alias: {
            //...
            'react/jsx-runtime': require.resolve('react/jsx-runtime')
	}
    }
}复制代码

3、process is not defined webpack

错误信息

process is not defined webpack复制代码

解决方案

由于 webpack 5不再为 Node.js 变量包含 polyfill，要避免在前端使用相关 API，说明文档：webpack.js.org/migrate/5/#…

因此，如果遇到依赖包有 process 等字段时，就会出现这个报错。很多答案会给你一个答案是

//webpack.base.config.js

module.exports = {
    plugins: [ 
        //...
        new webpack.ProvidePlugin({ 
            process: 'process/browser', 
        }), 
    ],
}    
复制代码

但这会导致一个新的报错：

Cannot find module "process/browser"复制代码

因此，正确答案应该是：

module.exports = {
    plugins: [ 
        //...
        new webpack.ProvidePlugin({ 
            process: 'process/browser.js', 
        }), 
    ],
}    
复制代码

4、Uncaught ReferenceError: Buffer is not defined

错误信息

Uncaught ReferenceError: Buffer is not defined复制代码

解决方案

module.exports = {
    plugins: [ 
        //...
        new webpack.ProvidePlugin({ 
            //...
            Buffer: ['buffer', 'Buffer']
        }), 
    ],
}

作者：wbh爱吃西瓜
链接：https://juejin.cn/post/7021457868612173832