首先概要
webpack是一门前端必须学的工具，然后前端开发对于代码的约束性非常有必要。一个项目当中需要有eslint配置，esnext语法特性，prettier语法格式化，typescript支持，postcss对css的预编译，babel新特性能够在项目当中使用。jest，等等。
一直以来，不觉得create-react-app是比较好用的，很多的新的，有自己期望所使用的内容，其实create-react-app都不适用自己的那个好奇心去使用，create-react-app的版本一定会有一定限制，那么要达到自己所期望的功能点，必须要实现的一个点位，就是npm run eject，然后暴露出来，再也无法恢复。
每一次对所拥有的项目进行封装，那么之后某一段时间自己是纯粹手工去复制和粘贴项目配置好的依赖文件和内容，再在上面去增删改，但是实际在更新的时候，不好用。我也不知道为啥webpack的社区里面，因为自己仅仅知道一个vue-cli比较好用，但是vue-cli是专门为vue所处理。webpack社区就一个webpack，所有依赖性的内容会和代码模块放到一起。create-react-app是一个好的工具，但是他不具备适配性（和自己期望的merge config方式不统一），所以我想去实现一个给予自己思路，特性的一个wenpack工具。
准备方案
首先，明确一个事实，自己设计模式，思考，代码能力都不够，所有需要的一切知识都是基于社区。需要对一些东西进行学习和研究，vue-cli,lerna,webpack,webpack-dev-server,create-react-app等等。
需要使用的库，更新补充。
webpack webpack-dev-server webpack-merge debug chalk
基础思路
webpack和webpack-dev-server包可以用node方法运行
const compiler = webpack(webpackConfig);
const server = new WebpackDevServer(compiler);
server.listen(port, host, err => {
console.log('webpack run error', err);
})
把webpack的一些运行配置封装到一个npm包里面，然后在使用的仓库里面安装这个npm包，使用到即可，可以省略webpack，webpack-dev-server，等等这些对于自己无用的配置，占自己的npm package.json的内容。
把webpack的配置共享到模块，自己封装一些常用的配置，然后可以直接在项目当中直接运行，封装一些比较有用的webpack插件，webpack-build-notifier,progress-bar-webpack-plugin,fork-ts-checker-webpack-plugin,ts-loader,eslint-loader,babel-loader,sass-loader,ModuleFederationPlugin,html-webpack-plugin,
对应，eslint有一些插件配置（略），babel有一些插件配置（略）。
todo
- 准备材料
- 学习关于需要做的内容
- 设计方案，写代码
2021-08-05 23:37:00
