在学习webpack之前，先问自己几个问题，带着问题学习。
首先webpack是什么?我们为什么要学习webpack?
webpack是一个(自动化)构建工具，所谓自动化，因为构建工具就是让我们不再做重复的事情，解放我们的双手的。
这张图告诉我们webpack可以将所有的前端文件都打包成模块，使用common.js规范(js模块化规范)导入其他功能代码，而不用手动复制代码到你正在写的文件。
那么自动化具体是怎么样的呢？ 举个栗子。
平时习惯使用es6语法来写js代码，但是浏览器不支持es6代码，这时我们就要将es6代码转换为es5代码。
<code>
a.es6
var a = () => console.log(this)</code>
执行编译命令
<code>
es6 -c a.es6 //this执行window对象
</code>
得到a.js
<code>
function a () {
console.log(this) //this指向window对象
}
</code>
执行压缩命令
<code>uglify -s a.js -o a.min.js</code>
得到a.min.js
<code>function a(){console.log(this)}</code>
这样我们每次修改代码，或者添加，都要重复输出上面2行命令，极其繁琐，而使用webpack，就自动帮助我们完成这一系列工作。
webpack最基本的功能就是打包模块了，下面来一步步的写一个Demo
建一个空文件夹
cmd进入该文件夹下
输入<code>npm init</code> 会让你选择比如项目名一系列选择，生成的目录package.json是该项目的配置，以及依赖，后面会讲到。
输入<code>npm install webpack</code> 项目安装webpack
新建main.js文件
<code>document.write('mmmmmmmmmmmmm')</code>
新建index.html文件
<pre><!DOCTYPE html>
<html><head>
<title></title>
</head><body><script type="text/javascript" src="bundle.js"></script>
</body>
</html></pre>
这是入口html 他会引入打包后的bundle.js文件
输入<code>webpack main.js bundle.js</code>生成bundle.js文件
最后打开index.html就会显示main.js里的信息。
在我参照一些博客写上述demo的过程中，出现过很多坑，比如说某些文档说的局部安装webpack，在cmd使用打包文件命令时要额外指定webpack在node_modules中的地址，博客主这样写能成功，我却在这里被坑了很久，直接用webpack ... 无需指定位置即可。可能这种情况以后能用上。
webpack高级功能
在写这篇文章之前在项目中遇到了一个问题，在webpack构建的本地服务器中去获取java后台tomcat启动的服务器里的资源的跨域问题。在百度查资料后，发现解决此问题很繁琐，主要涉及到的知识点是webpack webpack-dev-server，虽然网上有配置，但无法通过简单的复制粘贴就能达到目的，只有往深处挖细节，不留死角，一步一步来才能解决问题，而且正好让我可以了解跨域和webpack，知其然更要知其所以然。
构建本地webpack服务器(使用代理解决跨域问题)
cmd进入项目目录
<code>npm install webpack-dev-server //install之后只会出现空的webpack-dev-server文件夹，第二次下载才有内容</code>
之后我按照百度介绍的进入命令行<code>webpack-dev-server</code>即可启动本地webpack服务器，可输出的结果是，命令行不是内部或外部命令。解决方法是 在package.json的scripts对象中添加<code> "start":"webpack-dev-server"</code>然后cmd输入<code>npm start</code>即可启动 。
注意事项:webpack-dev-server需要依赖webpack-dev-middleware
通过npm启动要配置webpack.config.js和package.json 后面会讲到配置问题。
启动服务器默认会进入根目录，需手动在webpack.config.js中配置路径。位置为index.html所在的文件夹
在我最近做的项目里，百度查找的webpack跨域需要在webpack-dev-server配置中解决，但是项目里使用的是webpack-dev-middleware和webpack-hot-middleware,它们俩的效果等同于webpack-dev-server和webpack-dev-middleware。webpack-dev-server已经知道是什么了，现在要了解webpack-hot-middleware的作用与区别。
在我自己的vue+webpack项目中使用的是webpack-dev-middleware和webpack-hot-middleware实现的自动刷新，删除webpack-dev-middleware下载webpack-dev-server再启动就会报错。
好吧！在群里问了一下，问题就解决了。走了很多很多的弯路，但感觉是值得的。至少解决问题是在vue-cli脚手架里固定的配置，我学会了如何自己配置。
自己配置的方法:
在webpack.config.js里
<pre>
module.exports = {
entry:"./main.js",
output:{
filename:"bundle.js"
},
devServer:{
port:'8087', //当前路径是localhost:8087
proxy:{
'/classrooms/*':{
target:'http://localhost:8081', //代理的路径
secure: false
}
}
}
}
</pre>
在项目main.js里写入ajax
<pre>
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET",'/classrooms/100023');
xmlHttp.send(null);
xmlHttp.onreadystatechange = function() {
if ((xmlHttp.readyState == 4)) {
console.log(xmlHttp.responseText)
} else {
alert('fail');
}
}
</pre>
但是该方法在vue-cli搭建的项目里是会报错的，因为vue-cli已经自动生成了代理的配置。
在<code>vue-webpack/config/index.js</code>目录下
<code>/classrooms</code>不需要写完整
例如<code>/classr</code>写成这样，它也会自动匹配请求的url地址为 <code>"/classrooms/" + $(".create-import #classId").val() + "/members"</code>
简单的一行代码，即可完成和上面一样的结果。
在这里<code>console.log(xmlHttp.responseText)出来的是字符串格式的数据，转成json/对象 格式的则需要<code>var x = JSON.parse(xmlHttp.responseText)</code>
解决问题的过程我做起来太复杂了，实际上很简单，该问题告一段落，以后有webpack相关的问题，都在这里解决。
