从0到一个线上项目就是这么简单
工欲善其事，必先利其器！
作为一名前端工作者，如何利用众多的开发工具来提高自身开发效率，一直来都是大家不停探讨的话题。本文简要的叙述了利用 webpack 构建工具来搭建前端开发环境，提高开发效率的过程。
示例项目为一个简单的网站首页登录，包含有首页，登录页，注册页三个页面。主要完成各页面之间的逻辑跳转，登录时账号的验证，注册时数据的存储，以及页面的窗口自适应功能。
一、构建项目目录。
当我们接手一个新项目，研究过项目需求后的第一件事，我觉得便是要创建一个项目文件夹！这个文件夹初创之时空空如也，接下来要做的，便是根据自己项目的需求（个人喜好）来构建项目目录。
在我们的项目中，通常会包含 html，css，js，img 这些组成部分。
下图是本文所做示例项目的最初目录结构。
web-dev 文件目录
二、配置 webpack 配置文件。
进入示例项目文件夹，打开命令行工具，输入以下命令：
npm init
如果没有什么特殊要求，一直回车就好。之后系统会自动帮你在项目根目录生成配置文件：package.json。
接下来，我们需要从 npm 包中下载我们需要的模块。在命令行中输入下面两条命令。
npm install webpack webpack-dev-server -g
npm install webpack webpack-dev-server --save-dev
第一条命令为全局安装 webpack，webpack-dev-server 模块。全局安装过后，才能在之后的项目中调用这两个命令。
第二条命令为本示例项目中安装 webpack，webpack-dev-server 模块，在项目中安装之后，才能引用。
我们还需要在项目的根目录新建一个 webpack 配置文件，以便调用 webpack 命令时，执行我们的意图。
webpack.config.js
当入口文件较多时，我们可以来封装一个简单的获取方法来获取所有入口文件。
如图:
之后，我们在命令行中运行 webpack 命令：
webpack
注：如果配置文件名不为 webpack.config.js ，调用 webpack 命令时，需要在命令后加上参数 --config 文件名。实际输入命令为：
webpack --config fileName.js
此时，在左侧文件夹中，已经生成了编译打包过后的 js。
web-dev 打包后目录
三、loader。
以上，我们只是简单的走通了 webpack 打包 js 的基本流程，所有文件中并没有实际代码。下面我们在文件中写入一些基础代码，并引入相应的依赖模块，再来打包测试。
我们在每个 html 文件中引入相应的 js 文件。在 js 文件中引入相应的 less文件。在 less 中编写少量样式。
如图：
empty.less 主要来清除浏览器各项默认样式。在其他 less 文件中引用 empty.less。
config.js 主要来创建、收集公共方法和变量。在其他 js 文件中，引用 config.js。
在 html 中，我们引入打包过后的 js 文件，并在配置文件中配置相应的 loader 来完成 less 文件的编译。
在重新编译打包之前，我们需要先下载相关 loader：
npm install style-loader less-loader css-loader less --save-dev
之后，我们再次调用 webpack 命令:
webpack
在浏览器中打开 home.html，打开控制台我们可以看到，js 文件已经成功打包并引入。
控制台中，js 文件打印输出。
然而，此时页面中的样式并没有发生改变，我们在 js 文件中引用相应的 less 文件后，重新打包。
less 编译后插入页面
此时，我们看到，less 文件已经被成功编译，并插入页面。
四、webpack-dev-server 热更新。
webpack-dev-server 是一个小型的 Node.js Express 服务器，使用webpack-dev-middleware来服务于webpack的包。
我们来看一下下面的配置文件：
webpack.config.js 添加 webpack-dev-server 相关配置。
我们在配置文件中添加了有关 webpack-dev-server 的简单配置。
此时调用 webpack-dev-server 命令：
webpack-dev-server
可以在命令行中看到 webpack-dev-server 已经成功在 8080 端口启动：
webpack-dev-server 命令行信息。
打开浏览器：
在 8080 端口打开页面
可是，此时当我改动代码时，页面并不会发生任何改变。不知道是不是也有其他人卡在这个地方。
当初这个问题困扰了我很久，网上教程资料看了不少，各项配置折腾来折腾去，最终没能从配置上解决这个问题。所能找到解决问题的方式，就是改变现有的目录结构，无奈至极时突然灵光一闪，想起了一句话：
注意：你启动 webpack-dev-server 后，你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。
于是，在不改动目录结构的前提下，我做了如下尝试：
直接修改 html 中 js 文件的引入路径！
我们以 src 作为 webpack-dev-server 的根目录，而打包出口的文件名为：“js/[name].bundle.js”，所以引入路径我做了以下修改：
修改 js 引入路径
路径改过之后，重新调用 webpack-dev-server 命令，惊喜的发现，改动 js 和 less 文件时页面已经可以自动刷新。
此时我们若要想在改动 html 页面时，也可以自动刷新页面，只需要在 loader 配置中加入相应 loader 并在 js 文件中引用 html 文件即可：
配置 raw-loader
js 中引用 html
至此，有关项目的开发的基本配置已经完成，实现 less 的编译，页面的 webpack-dev-server 热更新，可以愉快地撸代码了。
五、项目编写
我们依照本文开始所定下的需求，完成静态页面和相关 js 的编写。此处就不做过多赘述，下图是我写好的各页面：
登录页
注册页
首页
五、后台数据请求
在静态页面完成以后，我们需要和后台同事协作，在登录、注册等操作时，调用后台借口。可有时后台并不能随时和你联调，因此，在我们编写 js 脚本时，就需要自己来模拟接口调用，完成数据处理逻辑。
当我们只是简单的数据请求时，我们可以伪造一份 json 数据文件，用来模拟后台数据响应。
在根目录下新一个文件夹，用来存放模拟后台返回数据的 json 文件。伪造简单的 json 数据：
data.json
例如，当我们进入首页后，需要在页面上展示一些内容，就可以这样模拟数据请求：
home.js
打开控制台，我们可以见到，后台返回的数据已经被打印了出来：
home.js
我们可以根据相应的业务需求，对数据进行一些处理，例如，数据罗列出来：
home.html
当然，为了更加真实的模拟数据请求，以及节省掉你手动伪造 json 数据的痛苦，我们可以自己重新启动一个服务，来满足业务需求。( webpack-dev-server 中有相应的 proxy 配置，不过个人觉得，配置折腾起来并不容易，索性就自己来重新启动一个服务）
我们在项目的根目录下新建 server.js ：
server.js
我们在 server.js 中，利用 node 的 express 框架启动了一个服务，监听 8081 端口。并接收该端口下名为 ‘signin’ 的 post 请求。
在项目的根目录下，重新打开一个 cmd 窗口，输入下面命令：
node server
命令行输出结果
我们可以看到，命令行中打印出：'-------------- server star localhost:8081 ----------------'，服务已经成功启动。
我们在注册页面调用 ‘signin’ 接口：
signin.js
当我们点击注册按键，成功的发出了请求：
signin.html
后台也成功的接收到了请求，在命令行中打印出：123
后台成功接收请求
至此，我们已经跑通了前后端的数据交互，接下来就进入到了具体的逻辑处理。
六、注册、登录验证
1、用户注册
既然有用户注册，就离不开注册信息的存储，在真实的项目开发中，后台的同志们大都用数据库来完成这项存储工作，可在这个示例项目中，我们实在是犯不上这么折腾。我们用一个小小的 json 文件来完成这项艰巨的任务。
当用户点击注册按键时，我们将用户的注册数据发送给后台服务器 （出参，入参请自行协商，发送请求之前也要先进行必要的格式验证，以减少不必要的请求，提高性能）：
signin.js
在服务中，我们借助 ‘body-parser’ 中间件来获取请求的入参信息。
server.js
此时我们点击注册按键，在命令行打印出注册用户信息：
命令行打印用户注册信息
收到数据信息后，利用 node 中 fs 模块，对 data.json 进行重写，用来储存注册信息数据，并将所有注册数据返回给客户端：
server.js
我们再次点击注册按键，发送请求，将注册信息和储存的信息打印出来：
signin.html
可以看到，每次注册后，注册信息都会增加一条。
打开首页后，我们发现，所有信息也都罗列了出来：
home.html
至此，我们便完成了对注册信息的储存，实现了用户注册的功能，并成功的将自己从伪造 json 数据的痛苦中解救出来。（注册成功后的页面跳转逻辑，请自行设计）
2、登录验证
当用登录时，同样要调用后台接口，我们在 server.js 中添加 ‘signup’ 接口，在登录时进行校验，并返回数据：
server.js 登录接口
此时，我们在登录页进行登录，如果成功则跳转进入首页，登陆失败则弹出提醒信息：
登录失败弹窗
登陆失败错误信息打印
若账号密码正确，则登陆成功，页面跳转至首页，并返回数据信息。
至此，一个简单的项目首页，用户的注册、功能已经开发完成。当然，示例项目中功能实现稍显简单，在实际项目开发中，交互逻辑可能会更加复杂，但本文旨在跑通流程，过多业务逻辑层面的功能实现，再次变不做赘述。
七、打包发布
当我们项目开发完成后，便需要打包发布上线（发布上线，一般和前端关系不大，本文不做赘述）。
webpack 作为一个优秀强大的前端工具，在此时，又显示出了诱人的魅力。
我们在 webpack.config.js 中修改了如下配置：
1、引入了几个依赖，便于打包（引入前请先下载安装）
引入相关依赖
2、配置 loader。
配置 loader
3、配置 plugins。
配置 plugins
4、封装获取 html模板函数。
获取 html 模板函数封装
至此，我们完成了所有的配置项，我们打开命令行，输入打包命令：
webpack
可以看到文件已经打包生成在 bundle 目录下：
打包后生成的文件
一切似乎都进行的十分顺利，一个完整的项目已经开发、打包完毕，剩下的就是把打包后的文件丢给后台的同学们，我们的工作似乎已经完成。可是当我们再次打开打包后的 html 文件，却发现了下面这些报错信息：
控制台报错
这是因为，我们在开发时引用的 ../js/bundle.js ，此时已经被打包生成了新的 js 文件，之前的路径已经不存在了。对此，我们可以在打包之前，手动注释掉，这样在打包过程中，去除注释时，会去除掉这里的引入。不过若是页面过多，手动注释有点的繁琐。
我们也可以利用其他的插件模块，在打包时自动替换引入路径。至于具体方法，还望大家自己研究。
至此，我们的工作结束了。
原文链接：http://www.jianshu.com/p/ffadd68affdf
推荐阅读：