目前，公司前端项目开发技术栈基本改造为使用gulp进行自动化构建，webpack进行项目模块化依赖管理，Vue+ Vuex + Vue-Router作为项目组件化开发框架，为了更深入的理解、使用当前技术栈并与读者分享、交流，计划推出一系列相关学习与实践文章。本篇为开篇，主要讲述如何使用webpack搭建开发环境。
项目初始化
以你喜欢的任意方式，创建项目根目录，如：
mkdir vue-hello
初始化包模块管理文件
进入项目根目录，初始化项目包模块管理文件package.json:
npm init
命令台会提示你输入一堆信息，如果你想简单一点，可以添加-y参数，跳过输入步骤，生成默认信息：
npm init -y
初始化源码目录
在项目根目录下创建源码目录结构，通常源码目录是src或app，个人喜好是使用src:
webpack简述及使用
虽然在本篇文章我们不会对webpack做太过详细的介绍，但是依然希望能帮助读者对webpack拥有更清晰的了解，webpack是什么？
webpack is a tool to build JavaScript modules in your application
webpack是一个帮助你的应用构建JavaScript模块的工具。
接下来，我们介绍几个知识点帮助理解webpack：模块化，webpack原理及其与grunt和gulp的比较。
模块化
模块化 指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程。
模块是一个可组合、分解和更换的单元，将一个系统分解成若干模块，单元；大家遵循一定的规范，各司其职，各自开发不同模块；之后可以较低成本的将模块组合起来，构成一个完整的系统，极大方便了团队成员之间的协助开发，产出效率得到有效提升。
WEBPACK原理
webpack是一个帮助你的应用构建JavaScript模块的工具，其本质只能处理JavaScript，那你会疑惑了，不是说使用webpack，可以很方便的在JavaScript代码中引用图片，CSS等资源嘛？是的，这正是webpack的优势，那怎么实现的呢？这就要涉及到webpack中的一个概念：加载器（loader）。
加载器 是作用于应用资源文件的转换器，它们是一系列JavaScript函数，接受资源文件的内容做参数，然后返回新的资源（以一个JavaScript模块的形式返回）。