think in webpack

在学习webpack之前，先问自己几个问题，带着问题学习。

首先webpack是什么?我们为什么要学习webpack?
webpack是一个(自动化)构建工具，所谓自动化，因为构建工具就是让我们不再做重复的事情，解放我们的双手的。

Paste_Image.png

这张图告诉我们webpack可以将所有的前端文件都打包成模块，使用common.js规范(js模块化规范)导入其他功能代码，而不用手动复制代码到你正在写的文件。
那么自动化具体是怎么样的呢？举个栗子。
平时习惯使用es6语法来写js代码，但是浏览器不支持es6代码，这时我们就要将es6代码转换为es5代码。
a.es6 var a = () => console.log(this)
执行编译命令
es6 -c a.es6 //this执行window对象
得到a.js
function a () { console.log(this) //this指向window对象 }
执行压缩命令
uglify -s a.js -o a.min.js
得到a.min.js
function a(){console.log(this)}
这样我们每次修改代码，或者添加，都要重复输出上面2行命令，极其繁琐，而使用webpack，就自动帮助我们完成这一系列工作。

webpack最基本的功能就是打包模块了，下面来一步步的写一个Demo

建一个空文件夹
cmd进入该文件夹下
输入npm init 会让你选择比如项目名一系列选择，生成的目录package.json是该项目的配置，以及依赖，后面会讲到。
输入npm install webpack 项目安装webpack
新建main.js文件
document.write('mmmmmmmmmmmmm')
新建index.html文件

这是入口html 他会引入打包后的bundle.js文件
输入webpack main.js bundle.js生成bundle.js文件
最后打开index.html就会显示main.js里的信息。
在我参照一些博客写上述demo的过程中，出现过很多坑，比如说某些文档说的局部安装webpack，在cmd使用打包文件命令时要额外指定webpack在node_modules中的地址，博客主这样写能成功，我却在这里被坑了很久，直接用webpack ... 无需指定位置即可。可能这种情况以后能用上。

webpack高级功能

在写这篇文章之前在项目中遇到了一个问题，在webpack构建的本地服务器中去获取java后台tomcat启动的服务器里的资源的跨域问题。在百度查资料后，发现解决此问题很繁琐，主要涉及到的知识点是webpack webpack-dev-server，虽然网上有配置，但无法通过简单的复制粘贴就能达到目的，只有往深处挖细节，不留死角，一步一步来才能解决问题，而且正好让我可以了解跨域和webpack，知其然更要知其所以然。

构建本地webpack服务器(使用代理解决跨域问题)

cmd进入项目目录
npm install webpack-dev-server //install之后只会出现空的webpack-dev-server文件夹，第二次下载才有内容
之后我按照百度介绍的进入命令行webpack-dev-server即可启动本地webpack服务器，可输出的结果是，命令行不是内部或外部命令。解决方法是在package.json的scripts对象中添加 "start":"webpack-dev-server"然后cmd输入npm start即可启动。
注意事项: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里


 module.exports = {
 entry:"./main.js",
 output:{
 filename:"bundle.js"
 },
 devServer:{
 port:'8087', //当前路径是localhost:8087
 proxy:{
 '/classrooms/*':{
 target:'http://localhost:8081', //代理的路径
 secure: false
 }
 }
 }
 }

在项目main.js里写入ajax


 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');
 }
 }

但是该方法在vue-cli搭建的项目里是会报错的，因为vue-cli已经自动生成了代理的配置。
在vue-webpack/config/index.js目录下