这段时间都在学习Vue，实在是太强大了，当然了，学习确实很累，应该要完整的使用Vue，学习Vue里面大大小小涉及到的东西有很多，只有记住它，多打代码才能更好的使用它，为我们做事！
在学习的过程中，遇到了很多问题，其实最烦恼的是webpack因为这个东西之前只是有个印象，但是并没有去操作它，所以曾着清明这几天，把它好好的了解下，网上教程真心有点乱，有点多，我是基于看了N多，然后总结起来，说实话第一次配置起来是真心有点麻烦，繁琐，但是多配置几次就好了，这东西，你要用它必须要会配置，如果单纯用别人生成好的脚手架，到时候出现问题，不懂解决，就会浪费很多时间，所以学习的时候尽量打好基础，当然了，自己写的文章，可能只有自己看得懂，而且这篇文章是在markdown上编辑好的，但是换到wp的编辑器上就一塌糊涂，我是真的懒得再折腾了，大家将就的看吧，本文篇幅有点长，需要认真看，希望，大家看完有所收获，那是再好不过了，如果有哪里不对的，也请指教！谢谢！
关于webpack我的理解就是把多个静态文件合并到一个文件里面去，减少多次请求。其实它深奥的，老手勿怪！
我的环境条件：Win7X64
首先，要使用webpack，一定要先下载node.js，因为NPM就是用node.js写的，关于node.js版本选择的话，有个版本是LTS（Long Term Support），我选择的是这个版本，然后就是软件的安装过程我就不多介绍了，狂点下一步，装好之后，就有个了个NPM包管理器，测试下是否安装成功：
1、`Win+R`调用命令，输入`cmd`打开命令提示符
2、输入`node -v`和`npm -v`如果有返回对应的版本信息就说明安装成功！
上面的准备工作做好之后，就可以准备迈入webpack的大门，来看步骤：
第一步：在本地磁盘创建好项目文件夹如（webpack-project），然后`Win+R`，输入`cmd`打开命令提示符，一定要先进入到自己刚才创建好的项目文件夹下，然后再运行`npm init`初始化项目，这时候在webpack-project文件夹下会有个package.json文件，就说明初始化成功。
第二步：在你创建好的webpack-project文件下，在创建这几个文件夹
1.dist，存放正式发布的项目文件
<!dcotype html>
<html>
<head>
<title>web page</title>
<script src="bundle.js"></script>
</head>
<body>
<p id="box">this is p tag</p>
</body>
</html>
2.src，存在资源路径
+ index.js——是在src下创建一个index.js做主要的入口,内容如下
import $ from "jquery"
$(function(){
$("#box").css("color","red");
console.log("ok");
})
3.webpack.config.js——插件配置文件，内容如下
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
第三步：`npm i jquery`安装js模块，因为在我们的项目中有引入到，所以我们要装jquery，这步的命令，网上有的写，要把这个包装到生成坏境中，所以要在命令后面加 --save-dev 参数，其实现在不需要了，默认安装好模块，就是在package.json文件中d的dependencies字段。
第四步：`npm install webpack`，这条命令可简写为`npm i webpack`，现在新版的webpack都需要再安装一个webpack-cli，所以我们把命令修改下`npm i webpack webpack-cli`，就可以在开始的时候就同时装好这两个软件，之所以一开始不这样，是因为之前的老版本不需要再安装一个，再说，如果你刚开始没安装webpack，到最后打包的时候，还是会提示你按照，你只要点下yes，那时候也会自动帮你安装好，也是很方便的。
第五步：在package.json，定义好webpack的启动脚本，打开package.json找到script字段，在原有的test下面在增加个
>"dev": "webpack"
最后就可以用打包了，输入`npm run dev`，即可完成打包，打包好后，就会在dist文件夹下，生成一个bundle.js文件
整理下思路：运行打包命令——找到打包的配置文件（webpack-config.js），配置文件里面有配置输出的文件夹名称（filename）和文件的路径（path），这里用到的都是node语法，所以需要去了解node——打包完成！
还有个之前看教程，有提到过webpack-dev-server，这个其实就是webpack的升级版，就是用来解决webpack的不足（每次修改后，都需要重新编译），webpack-dev-server就能解决这个问题，但是用webpack-dev-server也是要安装webpack的。
还有个点，webpack只能打包js文件，如果需要打包css，less文件就需要在其基础上在安装插件，然后再配置webpack-config.js文件，我是觉得对于初入webpak的，先了解，完成一次打包后，再其基础上再讲其他的，可能效果更好，网上的教程就是把太多步骤放在一起了，新手一看就懵逼了，你这也是我在找教程中，浪费最多时间的，还有就是你的坏境和设备版本跟教程中的都不一样，所以导致出现各种bug。所以一份好的教程，真的可以省下不少事情！