Webpack5 搭建一个简易的 React+TS 开发环境

发布网友发布时间：2022-09-25 18:21

我来回答

共1个回答

热心网友时间：2023-09-20 02:40

之前入行前端系统学习过 Webpack，那时候的版本是 4，当时对 Webpack 的印象就是简单，但绝不易上手，尤其是应用到项目中，各种插件眼花缭乱，心都碎了一地。

现在 Webpack 升级到 5 了，里面内置了很多的插件，但是也还是做不到零配置。

对于这种脚手架，我理想的是，应该少配置，甚至做到零配置，用起来简单的就像在 HTML 中引入 JQuery 一样。

Vite 加油！

之前写过 React 配合 Webpack4 实现 hello world ，感兴趣的可以看看。

webpack.base.config.js 也可以叫 webpack.common.config.js 如果感觉名字太长的话，可以把 config 的字段去掉，即：

初始化文件，和安装依赖（后面会单独把 package.json 文件的关键信息放出来）：

安装完这些，我们还需要一些 Webpack 插件，来辅助我们搭建项目，继续安装：

看下 package.json 的依赖，都是基于最新版：

public/tpl/index.html 的文件内容（主要是放置一个容器标签）：

入口 index.js 文件（让页面显示一个 hello demo）：

webpack.base.config.js 文件（公用的基础配置）：

[name][chunkhash:8] 的用法参考 template-strings

dev 环境下的个性配置，开启了 source-map 便于调试，参见 devtool ：

prod 环境下的个性配置：

Webpack4 我们清空目录使用的插件是 clean-webpack-plugin 现在 Webpack 已经内置了，参见： outputclean

package.json 的 scripts 字段新增内容如下：

最后：

浏览器打开 http://localhost:8080/ 即可看到：

还需要安装一些依赖：

依赖文件被更新为：

用 TS 需要有一个配置文件，package.json 在添加一个脚本命令：

运行 npm run ts:init 命令，项目根目录会出现 tsconfig.json 文件，因为项目会用到 jsx 语法和操作 DOM ，所以确认 tsconfig.json 的 lib 和 jsx 字段正确使用，例如。

webpack.base.config.js 需要做些改变，更改入口文件和 loader :

src/index.js 需要重命名为 src/index.tsx ，文件内容变更为：

npm run start 重启服务，浏览器完美运行:

当然事情可能不是那么的顺利，比如我就意外的收到了下面三个警告⚠️。

根据提示可以知道，项目的 code-splitting 和 performance 有带优化，code-splitting 是 Webpack4 的内容，参考链接 splitchunksplugin 性能的问题，可以参考 performance 来配置。

Webpack5 搭建一个简易的 React+TS 开发环境的教程就写完了，不知道你发现没 Webpack5 相对于 Webpack4 智能，又内置了好多社区插件，再给你举个例子🌰：

如果你使用过 Webpack 配置过项目，你一定知道

这三个处理静态资源的 loader。我这一说，你就该猜到了，没错 Webpack5 也给内置了。具体的使用参考

简单介绍下，我们找张 earth-girl.png 的图片来实战。

启用 loader 是使用 type 字段进行配置的， webpack.base.config.js 的 mole 需要新增规则

index.tsx 插入 img 标签：

这时候会编译错误，这是因为 TS 无法识别 png 文件，所以现在需要在项目根目录新建 custom.d.ts 文件内容为：

重启服务，打开浏览器，啦啦啦图片出来了：

今天就介绍到这里了，更多 Webpack 内容请去 Webpack 官网学习 https://webpack.js.org/

完～

热心网友时间：2023-10-12 03:37