webpack搭建vue脚手架（二）

上一篇中，使用webpack配置了一个基础的vue项目，能够对一个最基本的vue单页项目进行打包，在本篇文章中将继续进行接下来的工作。

上一篇文章中只是对vue项目进行打包，但是对于开发模式下相当的不友好，接下来我们从0开始重新来搭建一个项目。

1.构建项目目录

2.首先定义webpack的基础公共配置（webpack.common.js）

定义入口（entry），modules，plugins

这里要注意使用babel-loader对js文件进行转义，把一些js中的高级写法转换成能被浏览器支持的标准写法

并且需要在vue文件的rules中配置loaders，因为我打算在项目中使用less进行css的预编译，所以需要载入解析less的loader

3.定义开发环境配置

首先定义devServer

定义loader规则

配置plugin属性

最后使用webpack-merge对公共配置进行融合

要注意的是这里的写法有点特殊，使用了函数返回对象的方式，这是为了确保编译结束后打印的端口和实际端口一直，在package.json中配置的启动命令我带上了--port参数

同时为了避免麻烦，我获取到本机的ip地址打印出来

以上就是webpack搭建的脚手架的开发环境配置了，针对这些配置，我对之前的打包配置做了一些修改，包括抽离样式文件

开启多进程打包，压缩整理代码

代码分割美化，设置一些压缩规则

综上所诉就是一个完整的webpack配置项目了，感兴趣的小伙伴可以自己尝试配置一些复杂的属性，比如babel之类的，喜欢的小伙伴点个小心心哦！