由于现在的博客是使用wordpress搭建，自己得经常修改过一些代码，但是修改第三方源码真的比较痛苦，于是决定计划开始使用React + Node.js / Python开发新博客项目，最终替换当前博客代码，方便以后博客的维护和更新，也能实现自我开发技术，架构设计，解决问题能力的提升，同时记录下整个开发历程，总结，分享，希望能与读者们一起进步。本篇介绍如何使用Webpack和Babel，Eslint，documentation.js等搭建项目开发环境和生产环境，也算项目的准备工作，下一期计划介绍项目的架构设计和技术栈选择。
npm VS Yarn
在本项目我们使用Yarn管理项目三方依赖，不过放心，Yarn和NPM不冲突，也不是要替代NPM，使用方式基本一致，只需要简单了解以下几点。
三方库版本管理
npm 和 Yarn 都使用 package.json 来跟踪项目的依赖，版本号并非一直准确，因为你可以定义版本号范围，npm的不同更新范围，可能导致在拥有相同 package.json 文件的机器上安装不同版本包，这可能导致一些差异的异常和冲突。
那npm有解决方式嘛？npm中可以使用 npm shrinkwrap生成一个版本锁文件npm-shrinkwrap.json，在 npm install 时会在读取 package.json 前先读取这个文件，但是当更新包版本时，版本锁文件并不会自动更新，我们得手动再次执行npm shrinkwrap命令更新它。
那么Yarn有什么优势呢？每次添加或更新安装库包时，Yarn 都会创建（或更新）yarn.lock 文件，这样可以确保所有机器安装相同版本包，同时支持 package.json 中定义的允许版本范围，和npm的区别在于Yarn总会自动更新 yarn.lock，而npm需要手动更新。
并发安装
npm通常是按顺序一个一个安装依赖，而Yarn支持并行加载安装多个三方库包，所有其速度和效率都更快。
离线缓存
使用Yarn管理包时，三方库包存放在本地磁盘，下次安装将直接使用本地文件而不是再次下载，这也从另一方面使其安装速度优于npm。
简而言之就是，Yarn和npm使用方式几乎一样，但是其版本管理更方便，安装速度更快，更有优势，但是实际上它的所有三方库包加载地址和npm都是统一的。
Webpack
我们使用Webpack打包工具作为项目的自动化构建工具，将JavaScript，CSS，图片等资源都当作JavaScript模块（使用Webpack loader处理转换）进行统一管理，关于Webpack博主之前总结过两篇文章，可以参考：
- Webpack搭建SPA应用开发环境
- Webpack模块化管理CSS和图片等资源
有了前文的铺垫，本文就不打算展开介绍Webpack的工作原理和具体配置，而计划从项目实践开发和测试，打包层面思考如何更好的组织Webpack，如何使用Webpack提告项目开发，打包效率。