备注（写这么个标题主要是明确的吸引和我曾经有同样问题的人，当我写vue时急于求成我直接用了官方的脚手架，并没有自己搭建，结果我只知道表面怎么用，并不知道为什么，更不知道怎么改其中的配置，幸亏官方的脚手架比较好。但是你要用react ，jquery和webpack配合时，对于一些像我一样的入门级选手就不知所措了。尤其你要想随心搭建框架就更别提了。在此写下我在了解webpack上遇到坑，解决的经验，对于入门的你有用最好，也作为自己的一个笔记，如有错误请留言告知，我会非常感谢）
对于初学者首先要看入门的webpack官方网站学习基本功，但是由于我们想快速上手，往往上网找来xxx现成的框架，想先练习一下。但是你可能看到很多版本，现在我选三个不同难度的例子来分析（第一个例子）（第二个例子）（第三个例子）
你按照这些例子抄一遍你都能运行起来的，后两个是react＋webpack项目，但是我们讲的是webpack，这没关系，只要你懂了webpack是怎么回事，以后和谁一起搭建都没关系，主要是你懂他是怎么运行的就行。
（如果你用过grunt，gulp这些打包工具你用webpack就回上手很容易，但是在此我就当我们从零开始。）
（一）、第一个例子，主要写了webpack＋webpack-dev-server纯原始的用法；
首先都要全局安装webpack和webpack-dev-server；因为你要用webpack在终端进行打包编译，而webpack-dev-server你要用它进行代理服务的功能，也要全局安装。
1、用webpack进行编译：webpack 会把entry.js文件编译到新创的bundle.js文件中
终端中运行：webpack ./entry.js bundle.js
2、用webpack进行监听：webpack 能将不变的模块进行缓存并与改变的模块一起重新编译输出。
终端中运行：webpack --watch
3、安装webpack-dev-server：（开发一个本地服务，在没有本地服务时每次都的刷新页面，并且是从本地打开，细节在第一个例子中可以看到）
终端中运行：webpack-dev-server
在浏览器中打开http://localhost:8080/webpack-dev-server/或者http://本地IP地址:8080/webpack-dev-server/（端口号默认是8080可以修改，webpack有相应的文档配置）
4、webpack打包到xxx路径下的xxx文件包
这里我们的路径是dist，文件包叫bundle.js
在终端中运行:webpack --entry ./entry.js --output-path dist --output-file bundle.js
对于基本的webpack命令大体上我们就用到这些，下面来看第二个例子中这些命令会得到封装，通过npm进行调用。
（二）、第二个例子，是webpack+react，用的webstorm编辑器（在此我建议各位如果对webstorm了解不深的话，请不要用webstorm运行npm安装的大型项目，会把编辑器托死，尤其项目中有自动化测试部分，我用的是vsCode编辑器轻便，灵活。你也可以用其他更好用的，欢迎推荐给我）
这个例子的作者写的很清楚，在此我只把它webpack运行这部分拿来做对比，其他配置建议看官方文档；
下面这段代码我们经常在很多package.json文件中看见，这是为了我们让npm给我做一个代码运行的代理；
"scripts": {
"build":"webpack",
"dev":"webpack-dev-server --devtool eval --progress --colors --content-base build"
}
当你运行npm run dev时其实只是类似这样一个过程：
npm run dev -----查询packge.json文件中dev，执行具体命令------>webpack-dev-server --devtool eval --progress --colors --content-base build
所以这些真正的在做事情的还是第一个例子中哪些代码，注重基础，懂原理才能走的更远；
（三）、第三个例子（这位作者写非常好，体系完整，React Starter Kit，React＋redux＋webpack＋express等还有自动化测试这部分，如果你用react可以了解一下）
首先我们看它的package.json文件中的scripts部分，他这个项目安装了better-npm-run来优化npm配置文件的写法，所以我们的看betterScripts具体的配置信息
"betterScripts": {
"compile": {"command":"node bin/compile",
"env": {"DEBUG":"app:*"}
},
"start": {"command":"node bin/server",
"env": {"DEBUG":"app:*"}
},
｝
由于项目大所以我只对比webpack运行编译这部分，其他的webpack配置部分以后会有具体说明；
这里你要启动项目你可以在终端中运行
npm run start
这部分过程时这样的：
npm run start------查询packge.json文件中scripts里的start，执行具体命令------>better-npm-run start------查询packge.json文件中betterScripts里的start，执行具体命令--------->
node bin/server----------node 启动跟路径下的bin文件夹下的server文件------------>执行server文件中的具体配置，这个项目用了express发送服务给webpack-dev-server
所以你在终端运行npm run start，better-npm-run start（必须安装better-npm-run），
node bin/server都是行，不管怎么配置核心不便，只是形式更便于项目的开发；
webpack-dev-server 是一个小型的Node.jsExpress服务器,它使用webpack-dev-middleware来服务于webpack的包. 它也有一个微运行时是通过Sock.js连接服务器
Express会在后台调用http模块（node.js的）,因为Node会自动解析依赖关系,开启服务。
（SockJS是一个浏览器的JavaScript库，它提供一个WebSocket-like对象。SockJS给你一个清晰，兼容的Javascript API，在浏览器和web服务器之间创建一个低延迟，全双工，跨域的通信通道。）
具体了解：
webpack-dev-server
webpack（如果你没认真看过webpack，希望你有时间多看看）
better-npm-run（优化npm，有助于解决跨平台运行）
Express （丰富的 HTTP 快捷方法和任意排列组合的 Connect 中间件，让你创建健壮、友好的 API 变得既快速又简单。）
path （Node.js path模块提供了一些用于处理文件路径的小工具）
node文档
