起因
最近在使用RN做项目，有个需求是把app做成三端通用，即android、ios和web。转web是个头痛的问题，看了好几天相关的内容了，主要是webpack和react-native-web,没有发现可以直接运行的demo，好多一运行就有问题。对于webpack知识，也是盲区。折腾了好多天，算是有点眉目了，记录下来备用。
感谢
主要感谢这篇文章：https://segmentfault.com/a/1190000006178770
反复学习了三四遍，算是对webpack知识有了基本的了解。
后来找到了webpack的网站：https://webpack.docschina.org/concepts/
对于webpack算是有了比较系统的了解。
想要学习webpack，首先推荐上面推荐的两个网址，本文的demo也是一步一步跟着写下来的，js、css等的名字都是一样的，只是随着npm引入的包的版本不同和自己的实际情况，做了一些修改。我用的是Mac，对于windows可能会有些不同。
webpack是什么
webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle。（此句请反复读十遍）
webpack.config.js简介
webpack主要使用webpack.config.js配置文件,这个配置文件主要告诉webpack，这个项目的入口文件是哪个，打包后放到什么位置，对于js、css等文件如何解析转换，可以用什么插件等。webpack打包所用到的信息都是来源于该配置文件。主要信息包括：
- entry：入口文件，告诉webpack这个项目的第一个文件是什么，比如index.js,然后webpack会抽丝剥茧般把所有的对文件的引用都给找出来。
- output：webpack会把所有的文件打包成一个或多个bundle文件，output就是指定bundle的存放目录
- loader：webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
- 插件plugin：loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
- 模式mode：通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
- 本地服务器devServer：npm安装webpack-dev-server，可以开启一个本地服务器，devServer中会指定当前服务器所要加载的文件的根目录，方便测试。
开始webpack学习之旅
- 请先读推荐的第一篇文章，至少三遍，然后跟着做，如果出了错误，翻翻下面的评论，会有一些解决办法。但最终的demo好像仍有些问题。
- 请读推荐的第二篇文章，系统介绍webpack知识，直至对webpack有基本的了解。
- 本文能提供给你的：一个完整可运行的demo和我认为的一些注意事项。
我的demo
创建项目：在你存放项目的根目录，打开命令行：react-native init WebpackDemo创建一个项目，由于我是打算是将app做成web版本的，所有用的是react-native，但主要是学习webpack，并未用到android和ios东西。
-
使用vscode，打开项目，依次建立文件，下图红框内。然后把最下面package.json中的文件用demo中的package.json替换
image.png demo地址：https://github.com/zrfzhouruifeng163/WebpackDemo
（注意名字，在github建立repository时，名字是WebpackDemo，但是实际下载）需要注意：package.json中的内容要完全使用demo中的，如果是自己npm install的，可能版本不一致会出问题。
如何运行demo，两个命令，打包命令和运行server，在package.json中的scripts中进行了定义，webBuild2是打包的，server是启动本地服务器的
"webBuild2": "cd web && webpack",
"server": "webpack-dev-server --config web/webpack.config.js --port 8090 --open "
首先，命令行进入项目根目录
其次，运行打包命令npm run webBuild2
打包成功。
再次，运行启动服务器命令npm run server
启动server成功，然后会自动打开浏览器，访问根目录下的index.html文件。
如果你的页面能正常出现index.html的内容，那表示运行成功，算是对webpack有了初步的入门。
本文只是学习webpack，下一篇会给一个react-native-web的例子，那才是正题。
困惑
本人安卓出身，对于RN了解不多，对于JS，说实话，真的很不适应，JS知识浩如烟海，npm的包多如牛毛，在开发过程中用到的很多npm包，一头雾水，又不知道怎么改。学习react-native-web过程中曾几次想要直接放弃，对于RN不知还能坚持多久。
