vue.png
序言本人之前都是利用大牛们提供配置好的项目,然后在本地配置npm install,最后运行npm run dev，在这些项目基础上去开发新项目；就算不利用大牛的配置项目，都是全局安装了vue脚手架，webpack,然后npm init webpack project，就可以新建一个大部分插件，命令行配置和封装好的项目，就可以npm install，npm run dev运行项目开始开发，在开发中用到啥就配置啥。。。
1)新建空目录newDemo，使用npm初始化配置npm init可是我对项目里面webpack封装和配置好多东西都不清楚，因为没有深入去了解；所以我想一步步弄清楚里面的配置信息，我打算自己一步步来配置安装搭建整个项目起来；无意中在讨论群上看到分享的电子档vue.js实战，是尤雨溪老师作推荐序，·梁灏老师编著；这本书籍值得推荐大家看看，特别对于我这种初学者更适合；看了梁灏老师这书籍，特别是webpack配置这章节，我按着步骤学着并上手实践，下面的内容就是我一步步安装配置搭建后的项目流程的一些总结与感想还有梁灏老师写的书籍里面需要注意的知识点我也记录下来，整理成文章，目的是有利于往后自己遗忘可以查找并同时分享给大家，希望可以帮助对于webpack+vue项目搭建的一些配置信息和步骤不太清楚的小伙伴们；若文章有写的不好，或者有理解分析错误的点，请大家体谅并纠正，谢谢！
vw.png
说明：配置后项目里面就多了package.json文件
2)安装webpack，输入命令行npm install webpack --save-devvw2.png
安装好后package.json多了一行webpack指令
vw3.png
3）安装热更新，输入cnpm install webpack-dev-server --save-devvw4.png
说明：这里和往后内容使用
cnpm是因为我本地安装淘宝镜像，用cnpm配置安装命令行更快
安装好后package.json多了一行webpack-dev-server指令
vw5.png
4）新建webpack.config,js基本配置文件，在配置文件里进行初始化vw6.png
5）在package.json配置dev指令vw7.png
说明：配置好这条指令后就可以在命令板中输入npm run dev运行项目；在浏览器显示的地址是默认的 :8080/；如果不想要默认，可以改端口为：在package.json文件的scripts改dev为："webpack-dev-server --host 172.172.172.1 --port 8888 --open --config webpack.config.js"
6)在demo目录下新建mainjs在webpack.config.js配置以下内容：入口配置和出口配置
vw9png.png
需要特别注意：dirname前面是有两横（我就设置了一条横线，导致报错，看似小问题，可这坑不小，因为没留意，都找不到这bug）
vw10.png
6)继续在项目中新建一个index.html在index.html中设置以下内容：（需要把main.js入口文件引入index.html文件中）
vw11.png
输入npm run dev运行项目，下面显示命令行是成功调用：
vw12.png
调用成功后自动打开浏览器显示页面内容：端口默认为8080
vw13.png
7)为了测试命令行配置成功和webpack-dev-server的热更新功能成效；在main.js文件里修改index.html文件里面的内容，再运行项目看看浏览器显示内容的变化情况：
vw14.png
因为配置webpack-dev-server的热更新功能，修改后浏览器会自动更新修改后的内容：（说明前面的命令行配置成功）
vw15.png
温馨提示：每次修改项目，并没有刷新浏览器，就已经自动更新；这就是webpack-dev-serverd 热更新功能,它是通过建立一个webSocket（H5）连接来实时响应代码的修改，webSocket是客户端与浏览器双向响应
可以按f12，在浏览器的调试模式里查看到websocket
vw16.png
8)继续配置webpack --progress --hide-modules说明：生成目录dist中的main.js，这是个打包过程
vw17.png
已经生成dist目录的mainjs打包文件
vw18.png
9）若用到一些css样式，就需要用到style-loader和css-loader配置css-loader命令行
vw19.png
配置style-loader命令行
vw20.png
配置css-loader/style-loader命令行后，在webpack.config.js配置文件里配置loader，增加对.css文件的处理
vw21.png
示例：温馨提示：在配置文件中的module对象的rules属性中可以指定一系列的loaders，每个loader都必须包含test和use两个选项，意思是当webpack编译过程遇到require或import语句导入一个为.css文件，将它通过css-loader转换，再通过style-loader转换，然后继续打包；use选项的值可以是数组或字符串，如果是数组，它的编译顺序就是从后往前；
在项目目录下新建一个style.css文件
vw22.png
然后在main.js入口文件里面用import引入：
vw23.png
浏览器自动更新内容的字体样式（启动热更新功能）
vw24.png
此时可以在浏览器可以看到css是通过js动态创建
vw25.png
10)配置extract-text-webpack-plugin插件注意：上面用的方法，实际业务中，一般不用，因为项目大了样式会很多，都放在js里太占体积，不能做缓存；所以一般会用到extract-text-webpack-plugin 的插件来把散落在各地的css提取出来，并生成一个main.css的文件，最终在index.html里通过的形式加载它：
vw26.png
配置插件后在package.json中有显示配置后的extract-text-webpack-plugin命令行
vw27.png
配置好插件后也需要修改webpack.config.js配置文件为以下内容：
vw28.png
最后在index.html中引入main.css文件（.vue为后缀的文件中的style样式都统一打包在main.css文件中）
vw29.png
11)需要用到.vue为后缀的文件，则需要在webpack中使用vue-loader就可以对.vue格式的文件进行处理需要配置以下的所有命令:例如需要用到.vue文件需要先安装vue-loader、vue-style-loader等加载器并做配置；要使用es6语法，需要安装babel和babel-loader等加载器（注意一条都不能配置漏，不然出现报错可能影响往后的运行与配置）：
npm install --save vue
npm install --save-dev vue-loader
npm install --save-dev vue-style-loader
npm install --save-dev vue-template-compiler
npm install --save-dev vue-hot-reload-api
npm install --save-dev babel
npm install --save-dev babel-loader
npm install --save-dev babel-core
npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-runtime
配置好以上的命令行，package.json添加这些命令行
vw30.png
配置以上命令行后，在webpack.config.js配置文件中设置以下内容：
vw31.png
说明：vue-loader在编译.vue文件时，会对、