webpack5打包一个TS 库并发布到npm 一条龙实战教程（附模板代码）(1)

• 是否创建html 在仓库里

• 是否需要pwa

• 选择要使用的css 预处理器

• 你会在你的项目中使用CSS样式吗？

• 是否使用PostCSS

• 是否要添加全局css

• 选择包管理器

• 总览配置

• 四、 webpack 生成配置预览

• • webpack.config

• tsconfig

• 5、ts 声明文件没有产生处理

• • 修改代码

• 生成dist

• 配置tsconfig 生成声明文件

• 发布包到npm

• • 指定npm 包上传内容

• 打包上传

• 结尾

---

前言

=============================================================

现在的前端造轮子必然逃离不开webpack、rollup 等打包工具，webpack5 出来很长时间了，来试试吧。

文章会重零开始创建一个TS 库，并上传到npm，维度多以操作步骤顺序。

1. 新建项目 package.json

2. 安装webpack 和 webpack-cli

3. webpack-cli init 选择配置

4. webpack5 资源打包默认方案

5. ts 声明文件没有产生处理

6. 发布包到npm

注意：下文都是使用yarn npm 用户同步替换。

一、新建项目 package.json

---

创建新项目，这里我取名webpack5-ts-lib-boilerplate

然后通过yarn init 命令创建项目

二、安装webpack 和 webpack-cli

---

安装webpack 和 webpack-cli 到项目开发依赖，这里我选择的版本是最新版本。

yarn add webpack webpack-cli -D

三、 webpack-cli init 选择配置

---

执行下面命令：

yarn webpack-cli init

这时候进入选择配置模式，一一介绍配置：

选择语言

Which of the following JS solutions do you want to use?

您希望使用以下哪种JS解决方案？

这里