xao-mindmap-react-2 v0.0.2

项目定义

• 该项目是一个架子，用来在这个项目中编写自定义 react 组件，支持打包自定义组件，发布 npm 仓库。
• 如果要开发一个新组件，需要 git clone 该项目到本地新建目录中，进行后续组件开发。

ReferenceFrom

• https://blog.csdn.net/Afterwards_/article/details/123665155
• https://blog.csdn.net/tuzi007a/article/details/129116273
• https://juejin.cn/post/6844903928316821517#heading-2

Concepts

打包

是将 /src 下的源代码进行打包（编译、压缩、转语法es6->es5），产生的打包后文件可发布到 npm 仓库，供其他项目引入（npm install）

html-webpack-plugin的作用

html-webpack-plugin的主要作用就是在webpack构建后生成html文件（需要指定源码中的主页html文件），同时把构建好入口js文件引入到生成的html文件中。 webpack.config.js

plugins: [
    new HtmlWebpackPlugin({
		// 指定打包生成 html 文件名
		filename:'index.html',
		// 开发模式下打包html的时候，以index.html为模板
		template: path.resolve(__dirname, 'public/index.html')
    })
],

npm install 安装包时，常用的-S 、-D 、-g 有什么区别？

安装参考

1. 安装 react
2. 安装 babel 编译工具
3. 安装 webpack相关包
4. 安装 babel-loader
5. 安装 css-loader style-loader`

注意：安装的这些包仅用来本地调试以及打包过程，不需要添加到最终打包产物中，用户执行安装组件 npm install 的时候会根据 package.json 中定义的依赖安装额外的包。

不同环境的 webpack-config.js 配置文件

• dev 用来配置 webpack-dev-server 插件，启动一个开发服务用于预览组件效果
• prod 对应打包阶段

待整理

• 初始化工程目录结构

• "start": "webpack-dev-server --config config/webpack.dev.config.js",

• "build": "webpack --config config/webpack.prod.config.js",

• 样式问题, 固定后缀 module.css https://blog.csdn.net/weixin_43470799/article/details/127248938

webpack-config.js 中 loader 的声明语法，一律采用 use: [] {}

模块化引入样式文件问题（引入语法问题）

todo 测试 react-hook 开发 react 组件